css中2D和3D的区别

最新推荐文章于 2024-01-16 17:33:01 发布

卡布鲁大怪兽

最新推荐文章于 2024-01-16 17:33:01 发布

阅读量401

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/YangWenYu_lala/article/details/124131380

版权

本文详细介绍了CSS 3D转换中的位移、旋转、缩放、倾斜以及如何设置子元素的3D转换效果。重点讲解了rotateX、rotateY、rotateZ、scaleX、scaleY、scaleZ、skewX和skewY的使用，同时阐述了transform-style属性对于创建立体效果的重要性。此外，还提到了透视在3D转换中的作用，它决定了元素在视觉上的远近感。

摘要由CSDN通过智能技术生成

总结:
1. 3D中的位移也是相对于元素自身位置。
2. 3D转换中同样可以设置百分比,依然相对元素自己宽度和高度(后面的Z不能设置百分比)

3.旋转（rotate）
注意：旋转了以后，3d坐标轴的方向会发生变化的
rotateX(angle)
方向判断利用左手原则
rotateY(angle)
方向判断利用左手原则
rotateZ(angle)
方向判断利用左手原则
注：3D旋转中沿Z轴旋转的效果与2D转换中的旋转效果一样。

4.缩放（scale）
scaleX()
沿着x轴放大或缩小
scaleY()
沿着y轴放大或缩小
scaleZ()
沿着Z轴放到或缩小
注意：如果希望看到scaleZ()的效果，该元素必须是立体图形。

5.倾斜（skew）
3d中的倾斜实际和2d中的倾斜是一样的
skewX()
沿着x轴倾斜，x轴方向的两条边平行
skewY()
沿着y轴倾斜，y轴方向的两条边平行

6.子元素保留3D转换
transform-style: flat；
transform-style: preserve-3d;
flat 不保留3d转换，默认值
preserve-3d; 子元素保留3d转换，如果不设置这个属性，内部元素不会存在3D的遮挡关系(伪3D)
- 我们通过立方体案例发现，如果不设置这个样式，元素是一种伪3D效果，是平面结构
- 设置后可以看到元素呈现立体的显示效果，但是注意，设置了该样式，也要旋转给个角度才可以更直观的看出是个3d立体图。

7.透视

都需要加透视数值越大相当于距离屏幕越小（看的）成像越小