3D就是在X轴和Y轴的基础上加上Z轴,形成立体空间.
在css中X轴和Y轴相对比较好理解,但Z轴可以理解为眼睛看向电脑的方向(手模拟视线指向电脑)
一.透视属性
css中可以利用透视属性更好的能查看Z轴变化:近大远小,近实远虚(视觉效果)
语法:perspective 取值800px-1200px
注意:
- 透视属性需要给目标元素的父元素加
- 透视值越小离你越近,盒子越大; 透视值越大离你越远盒子就越小;
- 透视在使用时内容需要放中间,原因是透视的中心点默认在盒子的中间,如果不放在中间,内容就会发生倾斜的效果;
问题1:透视效果实现的3d效果吗?
不是3D,只是添加近大远小的视觉效果
问题2:透视的属性值只能写800-1200?
不是,只是推荐写800-1200范围
二.旋转
语法:
-
transform:rotateX(角度)
X轴旋转上下旋转 正值:从下往上旋转 负值:从上往下 -
transform:rotateY(角度)
Y轴旋转左右旋转 正值:从左往右旋转 负值:从右往左 -
transform:rotateZ(角度)
Z轴旋转转圈旋转 正值:顺时针旋转 负值:逆时针旋转 -
旋转综合写法:transform:rotate3d(x,y,z,角度);
eg: transform:rotate3d(1,1,0,90deg);
围绕x轴和y轴进行选择90度对角线旋转
注意:旋转综合写法一般不会使用
三.缩放
语法:
- transform: scaleX(倍数); 盒子宽进行缩放
- transform: scaleY(倍数); 盒子高进行缩放
- transform: scaleZ(倍数); z轴缩放,距离的远近
- 缩放综合:transform: scale3d(x,y,z);
取值:1以上放大,1以下缩小,1不变;
取负值元素会先缩小再放大
总结:3d状态只有位移,旋转,缩放; 倾斜是没有3d效果的
四.开启3D效果
实现方法:
- 添加 transform-style:preserve-3d;
- 使子元素处于真正的3d空间
实现步骤:
- 推荐给盒子父元素添加transform-style:preserve-3d;
- 按需求设置子盒子的位置(位移或旋转)
注意:空间内,转换元素都有自己独立的坐标轴,互不干扰
