CSS 变换与 3D 效果

探索用于 2D 和 3D 效果的 CSS 变换。学习旋转、缩放、倾斜、平移和透视。

2D 变换

CSS transform 属性可以对元素进行 2D 或 3D 变换：

rotate()

scale()

skewX()

translate()

rotate()

旋转元素（正值为顺时针）

transform: rotate(45deg);

scale()

缩放元素（1 = 原始大小）

transform: scale(1.5);        /* 统一缩放 */
transform: scale(2, 0.5);    /* X, Y 分别缩放 */
transform: scaleX(2);        /* 仅水平缩放 */

skew()

倾斜元素

transform: skew(10deg, 5deg);
transform: skewX(10deg);
transform: skewY(5deg);

translate()

移动元素

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

transform-origin 设置变换的原点：

transform-origin: center;      /* 默认 */
transform-origin: top left;
transform-origin: 50% 50%;
transform-origin: 20px 30px;

多个变换函数可以组合使用：

transform: rotate(45deg) scale(1.5) translate(20px, 20px);