2D/3D 变换

transform 可以对元素做平移、旋转、缩放、倾斜，不改变文档流，其他元素不会被挤动。配合 transition 使用，就是最常见的 hover 动画。

2D 变换函数

• translate(x, y) 平移，百分比相对于自身尺寸
• rotate(角度) 旋转，正值顺时针
• scale(倍数) 缩放，1 是原大小
• skew(x, y) 倾斜

3D 变换

3D 需要 perspective 透视配合，可以加在父元素上（perspective: 800px），子元素用 rotateX/rotateY/rotateZ 或 translateZ 产生立体效果。

transform-origin 可以改变变换原点，默认是元素中心。

代码示例

.item {
    transition: transform .3s ease;
}
.item:hover {
    transform: translateY(-6px) rotate(2deg) scale(1.05);
}

/* 3D 翻转 */
.scene {
    perspective: 800px;
}
.scene:hover .inner {
    transform: rotateY(180deg);
}
.inner {
    transition: transform .6s;
    transform-style: preserve-3d;
}