CSS变换 - 当发网

什么是CSS变换？

CSS变换（Transforms）是CSS3中的一个模块，允许您对元素在二维或三维空间中进行旋转、缩放、倾斜或平移等操作。变换不会影响文档的正常流，这意味着变换后的元素仍然占据其原始位置的空间。

变换的优势：

不会影响文档流
可以通过GPU加速提高性能
可以创建复杂的视觉效果
支持2D和3D变换
与过渡和动画完美结合

变换的浏览器支持

CSS变换在现代浏览器中得到了广泛支持。对于2D变换，几乎所有现代浏览器都支持；对于3D变换，大多数现代浏览器也提供了良好的支持。

Chrome 4.0+ (2D), 12.0+ (3D)

Firefox 3.5+ (2D), 10.0+ (3D)

Safari 3.1+ (2D), 4.0+ (3D)

Edge 12.0+

IE 9.0+ (2D), 10.0+ (3D)

2D变换

2D变换在二维平面上操作元素，包括平移、旋转、缩放和倾斜等基本变换。

1. 平移（Translate）

在水平和垂直方向上移动元素：

                        CSS
                    

                        .element {
    transform: translate(50px, 100px);
    /* 水平移动50px，垂直移动100px */
    
    /* 或者分别设置 */
    transform: translateX(50px);
    transform: translateY(100px);
}
                    

原始

平移

2. 旋转（Rotate）

围绕元素中心点旋转元素：

                        CSS
                    

                        .element {
    transform: rotate(45deg);
    /* 顺时针旋转45度 */
}
                    

原始

旋转

3. 缩放（Scale）

改变元素的大小：

                        CSS
                    

                        .element {
    transform: scale(1.5);
    /* 放大1.5倍 */
    
    /* 或者分别设置 */
    transform: scaleX(1.5);
    transform: scaleY(0.5);
}
                    

原始

缩放

4. 倾斜（Skew）

沿X和Y轴倾斜元素：

                        CSS
                    

                        .element {
    transform: skew(30deg, 20deg);
    /* X轴倾斜30度，Y轴倾斜20度 */
    
    /* 或者分别设置 */
    transform: skewX(30deg);
    transform: skewY(20deg);
}
                    

原始

倾斜

5. 矩阵变换（Matrix）

使用矩阵函数进行更复杂的2D变换：

                        CSS
                    

                        .element {
    transform: matrix(1, 0.2, 0.3, 1, 50, 20);
    /* 参数顺序：scaleX, skewY, skewX, scaleY, translateX, translateY */
}
                    

变换原点

transform-origin属性允许您更改变换的原点，即变换操作的中心点：

                        CSS
                    

                        .element {
    transform-origin: 50% 50%; /* 默认值：中心 */
    transform: rotate(45deg);
}

/* 其他值 */
.element {
    transform-origin: top left; /* 左上角 */
    transform-origin: 100% 100%; /* 右下角 */
    transform-origin: 20px 50px; /* 具体坐标 */
}
                    

中心旋转

左上角旋转

多重变换

可以同时应用多个变换，用空格分隔：

                        CSS
                    
                        .element {
    transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

原始

多重变换

注意： 变换的顺序很重要！不同的顺序会产生不同的结果。变换是从右到左应用的。

变换顺序的影响

变换的顺序会影响最终效果。例如，先旋转再平移与先平移再旋转会产生不同的结果：

                        CSS
                    

                        /* 先旋转再平移 */
.element1 {
    transform: rotate(45deg) translate(50px, 0);
}

/* 先平移再旋转 */
.element2 {
    transform: translate(50px, 0) rotate(45deg);
}
                    

3D变换

3D变换在三维空间中操作元素，需要设置透视和变换样式才能看到3D效果。

3D旋转

                        CSS
                    

                        .element {
    transform: rotateX(45deg); /* 绕X轴旋转 */
    transform: rotateY(45deg); /* 绕Y轴旋转 */
    transform: rotateZ(45deg); /* 绕Z轴旋转 */
    transform: rotate3d(1, 1, 0, 45deg); /* 自定义3D旋转 */
}
                    

3D平移

                        CSS
                    

                        .element {
    transform: translateZ(50px); /* Z轴平移 */
    transform: translate3d(50px, 50px, 50px); /* 3D平移 */
}
                    

透视（Perspective）

要看到3D效果，需要设置透视。透视可以设置在父元素上，也可以直接设置在变换元素上：

                        CSS
                    

                        /* 方法1：在父元素上设置透视 */
.container {
    perspective: 500px;
}

.element {
    transform: rotateY(45deg);
}

/* 方法2：直接在元素上设置透视 */
.element {
    transform: perspective(500px) rotateY(45deg);
}
                    

3D变换样式

transform-style属性决定子元素是在3D空间中定位还是在平面中定位：

                        CSS
                    
                        .container {
    transform-style: preserve-3d;
}

背面可见性

backface-visibility属性决定元素背面是否可见：

                        CSS
                    
                        .element {
    backface-visibility: hidden;
}

变换性能优化

为了获得最佳性能，应该注意以下几点：

使用transform和opacity属性进行动画，因为它们可以由GPU加速
避免在变换中使用会引起重排的属性
使用will-change属性提前告知浏览器元素将要变换
对于复杂的3D变换，考虑使用transform3d()函数

                        CSS
                    

                        .element {
    will-change: transform;
    transform: translate3d(0, 0, 0); /* 触发GPU加速 */
}
                    

变换效果演示

当前变换: 无

变换原点: 50% 50%

透视: 500px

变换类型

变换类型: 透视距离: 500px

变换参数

X轴值: 0 Y轴值: 0 Z轴值: 0

变换设置

变换原点: 启用3D变换样式显示背面

变换演示

X: 0

Y: 0

Z: 0

当前CSS代码

                            CSS
                        
                    transform: none;

实际应用示例

卡片悬停效果

                        CSS
                    

                        .card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-10px) scale(1.05);
}
                    

3D翻转卡片

                        CSS
                    

                        .flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
                    

加载动画

                        CSS
                    

                        @keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}
                    

图片画廊效果

                        CSS
                    

                        .gallery-item {
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.1) rotate(5deg);
    z-index: 10;
}
                    

上一课：动画下一课：CSS变量