JS+css写收缩右边栏

一、原理

1. transform 属性向元素应用 2D 或 3D 转换
2. css3的3d转换：translate3d(x,y,z)

二、css+div代码
css代码

<style>
.Right{
		width: 0px;
		height: 100%;
		float: left;
		background: blue;
		position: fixed;
		right: 0;
		bottom: 0;
    z-index: 10;
	}
.RightPull{
	width: 30%;
	transition: width 1s ease;
}
.RightPush{
  width:17px;
  transition: width 1s ease;
}

.Right_test{
	display: block;
	width: 17px;
	height: 61px;
	background: black;
	position: relative;
	left: -17px;
	bottom: 50%;
	top: 40%;
	z-index: 10;
}
.Right_test-navPull{
  transform:translate3d(0,100%,0);
  transition:transform 1s ease;
}
.Right_test-navPush{
  transform:translate3d(0,100%,0);
  transition:transform 1s ease;
}

.Right_test:hover{
	text-decoration:none; 
	background-position:right 0;
}
</style>

div代码

		<div class="Right" id="Right">
			<div class="Right_test" id="R