CSS深入学习二——3D转换_css translate3d

作者：程序代码艺术家 | 2024-02-05 09:56:43

踩

css translate3d

空间转换

使用 transform 属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z 三条坐标轴构成了一个立体空间， z轴位置与视线方向相同。

空间转换也叫 3D转换

属性：transform

使用translate实现元素空间位移效果

语法：

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值

像素单位数值

百分比

思考：

默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

目标：使用 perspective 属性实现透视效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/程序代码艺术家/article/detail/60321