一、CSS3 过渡属性transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
过渡属性需要触发事件，如：hover（鼠标划过事件）
- transition-property：检索或设置对象中的参与过渡的属性
说明：属性值可以单独设置否个属性，也可以设置多个属性 width，height； 还可以设置为all（默认值）代表所有属性 - transition-duration：检索或设置对象过渡的持续时间
说明：设置过度时间（s, ms） 1s = 1000ms - transition-delay：检索或设置对象延迟过渡的时间
说明：设置延迟过度时间（s, ms） 属性值为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果； - transition-timing-function：检索或设置对象中过渡的动画类型
说明：
linear 匀速
ease（默认值）逐渐慢下来
ease-in加速
ease-out减速
ease-in-out先加速后减速
贝塞尔曲线网址：http://cubic-bezier.com/
复合式写法：transition:all 2s 1s
linear ;
transition: 2s linear 1s all ;
说明：当使用复合式写法的时候，过度时间和延迟时间的顺序是不能互换的，第一个值代表过度时间，第二个值代表延迟时间；
注：哪个元素发生变形，就把过渡属性添加给谁； 建议写给元素初始的效果里；
二、CSS3 2Dtransform属性
transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。
2D功能函数：
1、2D位移 translate()
说明：translate(tx) 当参数设置一个值的时候，代表水平方向的位移；
translate(tx，ty) 第一个值代表水平方向的距离，第二个值 垂直方向的距离；
translate(tx，ty, tz) 第一个值代表水平方向的距离，第二个值 垂直方向的距离.第三个值 沿Z轴移动（3D）
translateX(tx) 指定方向设置位移 沿X轴移动
translateY(ty) 指定方向设置位移 沿Y轴移动
translateZ(tz) 指定方向设置位移 沿Z轴移动 ( 3D)
当属性值为正值时 代表的是向右或者向下移动，当为负值的时候 代表 向左或向上移动
说明：属性值可以用px 也可以用%（百分比大小的参照物是元素的宽高）
说明：translate（）位移的效果和定位里的relative的效果是类似的，都是在当前位置进行位移的，对其元素的布局是没有影响的，原来的位置的保留的。
2、2D缩放scale()
说明： 属性值代表的是倍数，是不用加单位； 0——1 之间是 缩小的效果， 大于1的时候都是放大效果；
默认值 是 1；
scale( 值1 ) 代表水平和垂直都放大或者缩小
scale( 值1，值2 ) 值1： 水平方向的缩放大小 值2 ：垂直方向
属性值可以设置为负值，但是很少用；
scaleX（值） 水平方向的缩放比例
scaleY（值） 垂直方向的缩放比例
scaleZ（值） Z轴方向的缩放比例 （3D）
3、2D旋转让rotate()
说明: 属性值的单位是度（deg）
rotate() 沿着中心点旋转； 只能放一个属性值 ，正值：顺时针旋转； 负值： 逆时针旋转；
rotateX() 沿X轴旋转
rotateY() 沿Y轴旋转
rotateZ() 沿Z轴旋转 （3D）
4、2D倾斜 skew()
说明：属性值的单位是度（deg）；属性值为正值：向左 或向上倾斜 负值：向右或向下倾斜
skew( 值1 )一个值的时候 代表 沿X轴倾斜
skew( 值1，值2) 值1： 沿X轴的倾斜 值2 ：沿Y轴的倾斜
skewX（） 沿X轴的倾斜
skewY（） 沿Y轴的倾斜
说明：元素通过 transform进行变形时，都是对其他元素的布局不产生影响的。不脱离文档流。
变形时元素默认情况下都是沿着元素的中心点去变形的
当使用复合式写法的时候，他们顺讯不同，会导致结果不一样，他们执行的顺讯是从后向前解析的。
transform: translate(100px) rotate 60deg);
5、原点设置属性：transform-origin
定义：transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
说明：transform-origin：值1 值2 ； 值1： 水平 值2： 垂直
px % left top right bottom ;
6、backface-visibility ：隐藏被旋转的 div 元素的背面
backface-visibility:visible;可见 （默认值）
backface-visibility:hidden;不可见
backface-visibility 的bug : 如果元素翻转后结束后显示在上一层，给他加一个背景色就可以解决了。
三、CSS 3Dtransform属性
transform
功能函数：
1、transform: translate3d(x , y , z);3d
transform: translate(x , y)
transform:translateX();
transform:translateY();
transform:translateZ(不能写百分比，只能写具体的数值); 3d
注： Z轴 的值，在设置的时候他不能用百分比设置，只能用具体的数字定义
2、transform: rotate();
transform: rotate();
transform: rotateX();
transform: rotateY();
transform: rotateZ(); 3d
transform: rotate3D(x,y,z,a); 3d
0 ：不旋转；1：旋转
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
3、transform: scale3d();
transform: scale3d(x , y , z); 3d
transform: scale(x,y)
transform: scaleX();
transform: scaleY();
transform: scaleZ(); 3d
4、transform-style 设置3D空间的
属性值：
flat ： 处在2D空间里 （默认值）
preserve-3d 处在3D空间里
5、perspective:200px; 景深 ：离屏幕多远的距离去观察元素，值越大幅度越小。 近大远小 属性值建议设置在 900——1200；
perspective:200px; （父元素）
transform:perspective(1200px)
（在子元素中使用）
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
6、perspective-origin : 原点设置，基点位置，观察3d元素的（位置）角度
perspective-origin：值1 值2；(父元素)
px % left top right bottom
7、 transform-origin : x y z ； 属性允许您改变被转换元素的位置，设置旋转元素的基点位置； z 不能设置%；
transform-origin ：50% 50% 0；
（默认值）
