3D动画(3D Transforms)
在2D transform的基础上, 可以使用X, Y, Z坐标来控制物体的运动方向及大小.
3D立体的概念
常用3D变换的方法
/*从左一起介绍*/
rotateX(45deg) /*沿X轴(水平方向)旋转45° 默认在物体的中心位置*/
rotateY(45deg) /*沿Y轴(垂直方向)旋转45° 默认在物体的中心位置*/
rotateZ(45deg) /*沿Y轴(垂直方向)旋转45° 默认在物体的中心位置*/
translateX(30px) /*沿X轴(水平方向)移动30px*/
translateY(30px) /*沿X轴(垂直方向)移动30px*/
translateZ(30px) /*沿X轴(纵向)移动30px 正数为放大, 负数为缩小*/
translate3d( tx, ty, tz )
/*同时改变X, Y, Z三个方向的位移*/ translate3d( 100px, 200px, 400px ) /*缩放和旋转方法也可以同时设置x, y, z轴的值*/ scale3d( sx, sy, sz ) rotate3d( rx, ry, rz, angle )
3D变换的常用属性
| 属性 | 描述 |
|---|---|
| transform | 向元素应用 2D 或 3D 转换 |
| transform-origin | 允许你改变被转换元素的位置 |
| perspective | 规定 3D 元素的透视效果 |
| perspective-origin | 规定 3D 元素的底部位置 |
透视 perspective
所有的3D物体在环境中是有景深的, 遵照近大远小的原理.
实现景深的基本步骤
- 在父级元素上设置透视
transform-style: preserve-3d;
perspective: 250px;
透视值表示视点与3D场景之间的景深。
透视值越小3D效果越明显。
perspective-origin
物体面朝某个方向, 可以将面朝方向当做自己的视线
添加前缀解决浏览器兼容问题
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;