引导者

CSS Transform 属性

简介

CSS transform 属性允许您对元素进行平移、缩放、旋转和倾斜变换。它是一种强大的工具，可用于创建各种视觉效果，例如动画、透视和 3D 效果。

使用方法

transform 属性使用值列表，每个值指定一个变换类型及其参数。语法如下：``` transform: translateX() | translateY() | translateZ() | scale() | scaleX() | scaleY() | rotate() | rotateX() | rotateY() | rotateZ() | skew() | skewX() | skewY() | matrix() | matrix3d(); ```

多级标题

平移变换

translateX(x)：沿 x 轴平移元素。

translateY(y)：沿 y 轴平移元素。

translateZ(z)：沿 z 轴平移元素。

缩放变换

scale(factor)：等比例缩放元素。

scaleX(factor)：沿 x 轴缩放元素。

scaleY(factor)：沿 y 轴缩放元素。

旋转变换

rotate(angle)：围绕 z 轴旋转元素。

rotateX(angle)：围绕 x 轴旋转元素。

rotateY(angle)：围绕 y 轴旋转元素。

倾斜变换

skew(x-angle, y-angle)：将元素倾斜一个特定角度。

skewX(angle)：沿 x 轴倾斜元素。

skewY(angle)：沿 y 轴倾斜元素。

组合变换

transform 属性可以组合多个变换，使用空格分隔：``` transform: translateX(10px) scale(2) rotate(30deg); ```

3D 变换

matrix() 和 matrix3d() 函数允许您对元素应用 3D 变换：

matrix(a, b, c, d, e, f)：应用 2D 仿射变换。

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)：应用 3D 仿射变换。

示例

以下示例显示如何使用 transform 属性创建旋转动画：```html

``````css #box {width: 100px;height: 100px;background-color: red;animation: rotate 2s infinite linear; }@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);} } ```

优点

跨浏览器兼容性好。

性能高。

易于使用。

允许创建复杂的视觉效果。

局限性

可能导致硬件加速问题。

并非所有浏览器都支持所有变换类型。

**CSS Transform 属性****简介**CSS transform 属性允许您对元素进行平移、缩放、旋转和倾斜变换。它是一种强大的工具，可用于创建各种视觉效果，例如动画、透视和 3D 效果。**使用方法**transform 属性使用值列表，每个值指定一个变换类型及其参数。语法如下：``` transform: translateX() | translateY() | translateZ() | scale() | scaleX() | scaleY() | rotate() | rotateX() | rotateY() | rotateZ() | skew() | skewX() | skewY() | matrix() | matrix3d(); ```**多级标题****平移变换*** translateX(x)：沿 x 轴平移元素。 * translateY(y)：沿 y 轴平移元素。 * translateZ(z)：沿 z 轴平移元素。**缩放变换*** scale(factor)：等比例缩放元素。 * scaleX(factor)：沿 x 轴缩放元素。 * scaleY(factor)：沿 y 轴缩放元素。**旋转变换*** rotate(angle)：围绕 z 轴旋转元素。 * rotateX(angle)：围绕 x 轴旋转元素。 * rotateY(angle)：围绕 y 轴旋转元素。**倾斜变换*** skew(x-angle, y-angle)：将元素倾斜一个特定角度。 * skewX(angle)：沿 x 轴倾斜元素。 * skewY(angle)：沿 y 轴倾斜元素。**组合变换**transform 属性可以组合多个变换，使用空格分隔：``` transform: translateX(10px) scale(2) rotate(30deg); ```**3D 变换**matrix() 和 matrix3d() 函数允许您对元素应用 3D 变换：* matrix(a, b, c, d, e, f)：应用 2D 仿射变换。 * matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)：应用 3D 仿射变换。**示例**以下示例显示如何使用 transform 属性创建旋转动画：```html

``````css

box {width: 100px;height: 100px;background-color: red;animation: rotate 2s infinite linear; }@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);} } ```**优点*** 跨浏览器兼容性好。 * 性能高。 * 易于使用。 * 允许创建复杂的视觉效果。**局限性*** 可能导致硬件加速问题。 * 并非所有浏览器都支持所有变换类型。