CSS Transform

最新推荐文章于 2025-04-16 17:00:29 发布

大大大老猫

最新推荐文章于 2025-04-16 17:00:29 发布

阅读量704

点赞数

分类专栏： css 文章标签： transform 2d 3d 组合变换

本文链接：https://blog.csdn.net/actionActivity/article/details/90166302

版权

本文详细介绍了CSS的transform属性，包括2D变换的旋转、缩放、倾斜和平移，以及3D变换的3D旋转、3D平移和3D缩放。还讨论了基点变换、变换组合以及3D场景中的景深和透视属性。通过实例展示了3D立方体的效果。

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

文章目录

2D 变形(变换)

使用 transform 属性可以对元素进行旋转、缩放、平移、倾斜

旋转

使用 transform:rotate() 属性来设置元素的旋转

<style>
    * {
    
        margin: 0;
        padding: 0;
    }

    .box {
    
        width: 200px;
        height: 200px;
        background-color: deeppink;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid;
        transition: 2s;
    }

    .box:hover {
    
        transform: rotate(360deg) ;
    }
</style>

<body>
    <div class="box"></div>
</body>

运行结果
在这里插入图片描述

缩放

transform:scale() 属性值可以来设置元素缩放的比例。
参数：

设置一个值
单一的数值即指定了一个缩放系数，同时作用于X轴和Y轴让该元素进行缩放
比 1 大时，元素放大，比 1 小时，元素缩小
设置两个长度/百分比值
两个数值即分别指定了2D比例的X轴和Y轴的缩放系数，相当于指定了两个值的scale()（2D缩放）函数。

/* 元素放大 */
transform:scale(2);

在这里插入图片描述

/* 元素缩小 */
transform:scale(0.5);

在这里插入图片描述

/* X轴放大,Y轴缩小 */
transform: scale(1.5, 0.5);

在这里插入图片描述

倾斜

使用 transform:skew() 可以设置元素倾斜，skewX() 表示按X轴方向倾斜，skewY() 表示按Y轴方向倾斜，单位可以使用deg
参数：
一个参数，默认和skewX() 相同
设置2个参数，可以同时按X轴和Y轴的方向倾斜

/* 一个参数默认按X轴方向倾斜 */
transform:skew(30deg);

在这里插入图片描述

/* 表示按Y轴方向倾斜 */
transform:skewY(30deg);

在这里插入图片描述

/* 设置两个参数时，按照两个轴(x,y)的方向倾斜 */
transform:skew(30deg,30deg);

在这里插入图片描述

平移

使用transform:translate() 属性可以操作元素平移，默认是 x轴(水平方向)上的平移。
设置一个参数，默认和 translateX() 相同

/* 修改 tramsform 的属性值为 translate() */
transform: translate(100px);

运行结果
在这里插入图片描述
使用translateY()可以设置元素在Y轴(垂直方向)上的平移

transform:translateY(50px);

在这里插入图片描述
transform:translate(x,y) 也可以设置两个值，指的是向两个方向同时平移

transform:translateY(50px,50px);

在这里插入图片描述

基点变换

首先，元素的 旋转、缩放、倾斜 默认都是按照 基点(默认为元素的中心点) 来变换的

最低0.47元/天解锁文章