CSS 2D/3D 变换

学习 translate/rotate/scale/skew · 难度：进阶 · +15XP

CSS 2D/3D 变换详解

CSS transform 属性允许你对元素进行旋转、缩放、移动和倾斜等变换操作。结合过渡和动画，transform 可以创建流畅的交互效果。所有变换都不会影响文档流中其他元素的位置。

2D 平移 translate

translate() 沿 X 轴或 Y 轴移动元素。可以使用像素值或百分比（百分比相对于元素自身尺寸）。

div {
  transform: translate(50px, 100px);  /* X 轴 50px, Y 轴 100px */
}
div.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 完美居中 */
}
div.only-x {
  transform: translateX(30px);
}
div.only-y {
  transform: translateY(-20px);
}

旋转 rotate

rotate() 按指定角度旋转元素。正值顺时针，负值逆时针。

div {
  transform: rotate(45deg);    /* 顺时针 45 度 */
}
div.half-turn {
  transform: rotate(180deg);
}
div.back {
  transform: rotateY(180deg);  /* 3D Y 轴翻转 */
}
img:hover {
  transform: rotate(360deg);
  transition: transform 0.5s ease;
}

缩放 scale

scale() 按比例缩放元素。值大于 1 放大，小于 1 缩小，负值会产生翻转效果。

div {
  transform: scale(1.5);       /* 放大到 1.5 倍 */
}
div.small {
  transform: scale(0.8);
}
div.stretch {
  transform: scale(1.2, 0.8);  /* X 轴 1.2, Y 轴 0.8 */
}
button:hover {
  transform: scale(1.05);      /* 悬停微放大 */
}

倾斜 skew

skew() 沿 X 轴或 Y 轴倾斜元素，创建斜切效果。

div {
  transform: skew(20deg, 10deg);  /* X 倾斜 20deg, Y 倾斜 10deg */
}
div.only-x {
  transform: skewX(15deg);
}

组合变换

你可以在一个 transform 声明中组合多种变换，用空格分隔。注意：变换的顺序会影响最终效果。

div {
  transform: translateX(100px) rotate(45deg) scale(1.2);
}
/* 不同顺序，不同结果 */
div.order1 {
  transform: rotate(45deg) translateX(100px);
}
div.order2 {
  transform: translateX(100px) rotate(45deg);
}

变换速查表

函数	作用	参数	示例
translate(x,y)	2D 平移	长度值或百分比	translate(50px, 0)
translateX(x)	X 轴平移	长度值	translateX(30px)
translateY(y)	Y 轴平移	长度值	translateY(-20px)
rotate(angle)	2D 旋转	角度 deg	rotate(45deg)
scale(x,y)	缩放	数字（比例）	scale(1.5, 1.5)
skew(x,y)	倾斜	角度 deg	skew(10deg, 5deg)
rotateX/Y/Z	3D 旋转	角度 deg	rotateY(180deg)
perspective(n)	透视距离	长度值	perspective(500px)

???? 练习

1. 用 translate(-50%, -50%) 配合绝对定位实现一个弹窗的完美居中
2. 给按钮添加 hover 时 scale(1.05) 的缩放效果
3. 创建一个加载动画，用 rotate 让图标持续旋转
4. 用 skew 制作一个倾斜的封面卡片
5. 尝试组合多个变换函数，观察不同顺序对结果的影响