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;
透视注意事项:
-
取值范围经常在 800px ~ 1200px 之间。
-
一定给父亲添加
-
透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
-
其中 d 为透视的距离
-
z 是
translateZ
的距离, 这个距离靠近我们,盒子越大
-
3.3D旋转
transform:rotateX 代表图像沿着x轴旋转,从下往上转,值为负,从上往下转值为正
transform:rotateY代表图像沿着y轴旋转,从下往上转,值为负,从上往下转值为正
若想让图像呈现立体:
子盒子需要在父盒子里添加 transform-style: preserve-3d;
4.动画
1.动画有两个步骤: 定义动画,和调用动画
定义动画代码: 分为单个动画和多个动画,from-to是指动画开始到结束,另一个是百分比分段,指动画阶段有多个,例如0%{添加动画转换元素} 50%(