网站
引入
CSS 转换用于改变元素的显示位置、大小、角度和形状。
它常用于按钮悬停、卡片上浮、图标旋转、图片缩放等效果。
正文
定义
定义
transform用于对元素进行位移、旋转、缩放、倾斜等变形操作，包括 2D 转换和 3D 转换。
transform 只改变元素的视觉效果，一般不会影响普通文档流中其他元素的位置。
语法
.box {
transform: 转换函数(值);
}例如：
.box {
transform: translateX(20px);
}表示让 .box 在视觉上向右移动 20px。
2D 位移 translate()
translate() 用于移动元素。
.box {
transform: translate(20px, 10px);
}第一个值控制水平方向，第二个值控制垂直方向。
也可以单独写：
.box {
transform: translateX(20px);
}
.item {
transform: translateY(-10px);
}translateY(-10px) 常用于卡片上浮效果。
2D 缩放 scale()
scale() 用于放大或缩小元素。
.box {
transform: scale(1.2);
}1 表示原始大小，大于 1 表示放大，小于 1 表示缩小。
.img:hover {
transform: scale(1.05);
}这个写法常用于图片悬停放大。
2D 旋转 rotate()
rotate() 用于旋转元素。
.icon {
transform: rotate(45deg);
}deg 表示角度，45deg 就是旋转 45 度。
2D 倾斜 skew()
skew() 用于让元素倾斜。
.box {
transform: skew(10deg, 0);
}倾斜效果不如位移、缩放、旋转常用，使用时要注意可读性。
多个转换一起写
多个转换可以写在同一个 transform 中。
.card:hover {
transform: translateY(-4px) scale(1.02);
}注意：如果分开写多个 transform，后面的会覆盖前面的。
.box {
transform: translateX(20px);
transform: scale(1.2);
}上面最后只会保留 scale(1.2)。
3D 转换
3D 转换用于在三维空间中改变元素。
常见函数：
| 函数 | 作用 |
|---|---|
translateZ() | 沿 Z 轴移动 |
rotateX() | 沿 X 轴旋转 |
rotateY() | 沿 Y 轴旋转 |
rotateZ() | 沿 Z 轴旋转 |
.card {
transform: rotateY(20deg);
}3D 效果通常需要配合 perspective 才更明显。
.scene {
perspective: 800px;
}
.card {
transform: rotateY(25deg);
}例子
卡片上浮
<div class="card">卡片内容</div>.card {
padding: 24px;
border-radius: 12px;
background-color: white;
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
}鼠标移上去时，卡片在视觉上向上移动。
图片悬停放大
<img class="photo" src="photo.jpg" alt="图片">.photo {
transition: transform 0.3s ease;
}
.photo:hover {
transform: scale(1.05);
}图片会在鼠标悬停时轻微放大。
特点
transform用于控制元素变形translate()用于移动元素scale()用于缩放元素rotate()用于旋转元素skew()用于倾斜元素- 多个转换要写在同一个
transform中 transform常和transition搭配使用- 3D 转换通常需要配合
perspective
理解
transform 可以理解为只改变元素“看起来的位置和样子”。
它不像 margin 那样真正把周围元素推开，所以很适合做动画和交互效果。
常见页面里最常用的是 translate()、scale() 和 rotate()，先掌握这三个就够用很多场景。