css 3d笔记

透视
3d变形函数
3d加速

透视：

开启3d只针对子元素：

-webkit-transform-style:preserve-3d;
-webkit-perspective:300; /*每一个元素都有一个消失点*/
-webkit-perspective-origin:25% 75%;

<div id=“view” style=“width:160px; height:160px; margin:80px auto 0 auto;”>
<div id=“box”>
a
b
c
d
e y-90 z90 z89
f
</div>
</div>

3d变形函数
3d变形使用的是和2d变形类似的transform属性
rotateX旋转X轴，rotateY旋转Y轴，rotateZ旋转Z轴
translateX translateY translateZ在 XYZ轴上移动
scaleZ(sz) Z轴缩放
matrix3d() 函数则牵扯到线性代数、立体几何、三角学等各种知识

3d加速: 不要乱用
.cube{
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
perspective:1000;

#box
{
-webkit-animation-name:animation;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:3s;
margin:80;
-webkit-transform-style:perserve-3d;
-webkit-transform-origin:80px 80px 0;
}

@-webkit-keyframes animation
{
from,to{}
16%{-webkit-transform:rotateY(-90deg);}
33%{-webkit-transform:rotateY(-90deg) rotateZ(135deg);}
50%{-webkit-transform:rotateY(225deg) rotateZ(135deg);}
66%{-webkit-transform:rotateY(135deg) rotateX(135deg);}
83%{-webkit-transform:rotateX(135deg);}
}