css2d、3d功能函数

Adolph,

于 2020-04-07 18:25:03 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/Addolp/article/details/105370741

本文深入讲解了CSS中2D变换的使用方法，包括平移、旋转、缩放和倾斜等核心变换属性。通过实例展示了transform属性如何应用于平面空间元素，如translate、rotate、scale和skew函数的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2D的缩放： transform:scale(x,y);

        x ， y  这两个参数为一个数字，大于1放大  小于1缩小        transform:scaleX();
    transform:scaleY();  2D:        平面空间的元素变形。
变形属性：
    transform:
    transform的属性值为功能函数。    2d功能函数：
    2d的位移：
    2D的旋转：
    2d的缩放：
    2d的倾斜：

2D位移：
    transform:translate(x,y);        transform:translateX(x轴移动的距离);
    transform:translateY(Y轴移动的距离);transform:rotate(30deg);        transform:rotateX(30deg);
    transform:rotateY(30deg);

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

–> transform:translate(x,y);
transform:translateX()
transform:translateY()

3d位移：
    transform:translate3d(x,y,z);
    transform:translateZ();