3D的变形属性transform

最新推荐文章于 2023-12-04 22:55:10 发布

原创最新推荐文章于 2023-12-04 22:55:10 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS中3D变换的基本概念与应用，包括transform-style属性的作用，3D位移、旋转和缩放的具体实现方式，以及如何通过backface-visibility属性控制背面可见性。文章提供了丰富的示例，如translate3d、rotate3d和scale3d函数的使用方法，帮助读者掌握3D CSS变换的技巧。

平面空间：
transform-style:flat

形成3d空间(让父元素形成3d空间、3d舞台)：
    transform-style:preserve-3D

3D的功能函数：
    3d-位移
    3d-缩放
    3d-旋转
3d位移：
    transform:translate3d(x,y,z);
    transform:translateZ();
3d旋转：
    rotateZ();
    rotate3d(x,y,z,度数)
        注：x y z 一个矢量值  0 不旋转   1 旋转
        eg:rotate3d(1,1,0,45deg)   等价于  rotateX(45deg) rotateY(45deg)
3d-缩放：
    scaleZ()
    scale3d(x,y,z)
让背面不可见：
    backface-visibility:hidden;