CSS 3 3D转换

绘制3D环境

父元素设置了 preserve-3d  子元素就可以以父元素作为平面进行3d转换

 transform-style: preserve-3d; 

设置视点 :表示透视效果  值越小 透视效果越明显(联系现实) 
perspective: 50px;

设置元素背面是否可见 visible:可见的 默认属性 hidden:;不可见

 backface-visibility: hidden;

 

 设置视点的原点

top  bottom  right  left  center (默认值) 

可以用具体的数值  100px  或者用50%

 perspective-origin: center; 

 注:形变的原点也就是该元素围绕着的那个点变行或者旋转,该属性只有在设置啦

　　transform的时候会起作用   

 

3D动画

(1)平移 x, y ,z
前两个值可以是具体的数值 也可以使用百分比(参考值是元素)
最后一个属性必须是数值

100% {transform: translate3d(50%, 50%, 50px)}

(2)缩放: x y z 比例系数
100% {transform: scale3d(1.2, 1.2, 1.2);}

(3)旋转
四个参数 前三个分别是定义三维空间中的一个点, 该点与原点的连线为轴, 第四个参数设置的围绕该轴旋转的度数


100% {transform:rotate3d(100, 0, 100, 60deg);}