CSS3实现3D效果

CSS3实现3D效果
实现3D效果必须要知道这几个属性：
1.transition（过渡属性）
CSS3的transition允许CSS的属性只在一定的时间区间内平滑的过渡。这种效果可以在鼠标滑过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
1)transition-property:检索或设置对象的参与过度的属性；
2)transition-duration：检索或设置对象过渡的持续时间，单位可以使s和ms；
3)transition-delay：检索或设置对象延迟过渡的时间，单位可以使s和ms。属性值为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果；
4)transition-timing-function：检索或设置对象中过渡的动画类型，linear——匀速、ease（默认值）——逐渐慢下来、ease-in—加速、ease-out——减速ease-in-out——先加速后减速。
贝塞尔曲线网址：http://cubic-bezier.com/
复合式写法：transition:all 2s 1s linear ; 第一个数值为过渡时间第二个数值为延迟时间，不可变。
2.transform（可以实现元素的位移拉伸或旋转等效果）
1)transform: translate3d(x , y , z);（位移，分别代表沿x轴y轴z轴移动）
transform:translateX();
transform:translateY();
transform:translateZ(不能写百分比，只能写具体的数值);前后是z。
下图横线X竖线Y前后位移Z，很明显这个正方形向里走了假设是30px，于是它就是transform:translateZ(-30px)它又向左走了30px，就是transform:translateX(-30px);

2) transform: rotate3D(x,y,z,a); （旋转,用单位是deg（度）的数值来表示旋转角度。）
transform: rotate();
transform: rotateX();
transform: rotateY();
transform: rotateZ();
以下了解就好:
0 ：不旋转；1：旋转
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正 值，元素顺时针旋转，反之元素逆时针旋转。
3) transform: scale3d(x , y , z); （缩放）
transform: scale(x,y)
transform: scaleX();
transform: scaleY();
transform: scaleZ();
4) transform-style 设置3D空间的
属性值：flat ： 处在2D空间里 （默认值）
preserve-3d 处在3D空间里（3D必不可少的，添加到你想要的变成3D的元素内）
5)transform-origin : x y z；
属性允许您改变被转换元素的位置，设置旋转元素的基点位置； z 不能设置%；transform-origin ： 50% 50% 0；（默认值）
6)perspective​（景深，如果当你的视线距离物体足够远的时候， 基本上就不会有近大远小的感觉）
perspective:200px; （父元素）
transform:perspective(1200px) （在子元素中使用）
两个都设置会发生冲突，建议只设置父元素属性值建议设置在 900——1200。
7)perspective-origin : 原点设置，基点位置，观察3d元素的（位置）角度
perspective-origin：值1 值2；(在父元素添加)
属性值可以是以px 、%为单位的数值，也可以用left、 top、 right、bottom。