当前位置：首页 > news >正文

CSS中的transform

news 2025/7/23 7:34:59

在 CSS 中，transform 是用于用于用于对元素进行几何变换的属性，可实现旋转、缩放、平移、倾斜等效果，且不会影响其他元素的布局（不会触发重排）。以下是其核心用法和特性：

1. 基本语法

element {transform: 变换函数1(参数) 变换函数2(参数); /* 多个变换可叠加 */transform-origin: x-axis y-axis; /* 变换原点（默认中心） */transition: transform 0.3s; /* 配合过渡实现平滑动画 */
}

2. 常用变换函数

（1）平移（`translate`）

沿 X/Y 轴移动元素，不影响布局。

 .box {transform: translate(50px, 30px); /* X轴+50px，Y轴+30px */transform: translateX(50px);      /* 仅X轴 */transform: translateY(30px);      /* 仅Y轴 */transform: translateZ(100px);     /* 3D Z轴（需配合perspective） */
}

百分比基于元素自身尺寸：translate(50%, 50%) 表示移动自身宽高的一半。

（2）旋转（`rotate`）

绕原点旋转元素，单位为 deg（度）或 rad（弧度）。

.box {transform: rotate(45deg);      /* 顺时针旋转45度 */transform: rotate(-30deg);     /* 逆时针旋转30度 */transform: rotateX(60deg);     /* 3D 绕X轴旋转 */transform: rotateY(60deg);     /* 3D 绕Y轴旋转 */
}

配合 transform-origin: left top; 可改变旋转中心（如绕左上角旋转）。

（3）缩放（`scale`）

放大或缩小元素，默认以中心为基准。

.box {transform: scale(1.5);       /* 宽高均放大1.5倍 */transform: scaleX(0.8);      /* 仅宽度缩小到80% */transform: scaleY(1.2);      /* 仅高度放大到120% */
}

负值会翻转元素（如 scaleX(-1) 水平翻转）。

（4）倾斜（`skew`）

沿 X/Y 轴倾斜元素，产生扭曲效果。

.box {transform: skew(20deg, 10deg); /* X轴倾斜20度，Y轴倾斜10度 */transform: skewX(30deg);       /* 仅X轴 */transform: skewY(15deg);       /* 仅Y轴 */
}

（5）矩阵变换（`matrix`）

用矩阵值一次性定义复杂变换（较少直接使用）。

.box {transform: matrix(1, 0, 0, 1, 50, 30); /* 等价于translate(50px, 30px) */
}

3. 关键特性

（1）不影响布局

transform 变换后的元素仍占据原位置（不会改变文档流），避免了 margin 或 top/left 带来的重排性能问题。

（2）叠加变换

多个变换函数可按顺序叠加（从右到左执行）：

/* 先旋转45度，再平移50px（注意顺序影响结果） */
.box {transform: translate(50px) rotate(45deg);
}

4. 应用场景

（1）悬停动画

.button {transition: transform 0.3s;
}
.button:hover {transform: scale(1.05) translateY(-3px); /* 轻微放大+上移 */
}

（2）居中对齐

/* 未知尺寸元素水平垂直居中 */
.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 基于自身尺寸偏移 */
}

（3）3D 卡片效果

.card {transition: transform 0.5s;transform-style: preserve-3d;
}
.card:hover {transform: rotateY(180deg); /* 翻转卡片 */
}

（4）滚动动画

结合 JavaScript 监听滚动，动态改变 transform：

window.addEventListener('scroll', function() {const scrollY = window.scrollY;document.querySelector('.box').style.transform = `translateY(${scrollY * 0.5}px)`;
});