移动web之动画,外加3d

1.3D位移书写:

transform:translateX(值px);代表坐标轴x轴,x轴向左,值为负,向右为正

transform:translateY(值px);代表坐标轴y轴,y轴向上,值为负,向下为正

transform:translateZ(值px);代表坐标轴z轴,z轴指向我们越大,为正值,指向我们越小值为负

连写: transform: translate3d(x, y, z);

透视:

2.透视

透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法:

 perspective: 800px;

透视注意事项：

1. 取值范围经常在 800px ~ 1200px 之间。

2. 一定给父亲添加

3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

   • 其中 d 为透视的距离

   • z 是 translateZ 的距离， 这个距离靠近我们，盒子越大

3.3D旋转

transform:rotateX 代表图像沿着x轴旋转,从下往上转,值为负,从上往下转值为正

transform:rotateY代表图像沿着y轴旋转,从下往上转,值为负,从上往下转值为正

若想让图像呈现立体:

子盒子需要在父盒子里添加 transform-style: preserve-3d;

4.动画

 1.动画有两个步骤: 定义动画,和调用动画

定义动画代码: 分为单个动画和多个动画,from-to是指动画开始到结束,另一个是百分比分段,指动画阶段有多个,例如0%{添加动画转换元素} 50%(