变换

默认情况下，CSS 框，也就是 HTML 元素的视觉表示，非常方形。至少是矩形；水平的，有四条直线和四个无聊的直角。但使用 transform，你可以将这些框拉伸和塑造成各种形状。

通过二维操作框，transform 可以用于 旋转、倾斜、缩放 和 平移 框及其内容。

旋转

以下将产生一个正方形的橙色框，其中的所有内容——文本、图像、任何东西——都会整齐地站立待命

.note {
    width: 300px;
    height: 300px;
    background: hsl(36,100%,50%);
}

但你可以通过添加进一步的声明来让这些士兵转动

transform: rotate(-10deg);

这将使框以及重要的是其中的所有内容，逆时针旋转十度。

倾斜

倾斜允许你倾斜水平和垂直方向，所以以下代码…

transform: skew(20deg,10deg);

…将沿 x 轴倾斜 20 度，沿 y 轴倾斜 10 度。

你也可以指定一个角度，例如 skew(20deg)，这等同于 skew(20deg,0)。

缩放

显然，你可以改变框的 width 和 height 属性，但这不会影响其中任何内容的尺寸。然而，缩放将不仅乘以宽度和高度，还将乘以框中包含的所有内容的尺寸。

transform: scale(2);

这将使尺寸乘以两倍。你可以使用任何正数，包括小于“1”的值，例如“0.5”，如果你想使用缩小射线。

你也可以分别缩放水平和垂直尺寸

transform: scale(1,2);

这将保持水平尺寸不变（因为它是 1 的缩放），并将垂直尺寸乘以两倍。

平移

你可以使用 transform: translate 在水平和垂直方向上移动框。

transform: translate(100px,200px);

类似于 position: relative; left: 100px; top: 200px;，这将使框向右移动 100 像素，向下移动 200 像素。

组合变换

想同时旋转和缩放？你这个疯狂的小孩。你可以通过简单地用空格分隔值来做到这一点，例如

transform: rotate(-10deg) scale(2);

或者，你也可以使用 matrix 函数。matrix 可以处理所有这些——旋转、倾斜、缩放和平移。它接受六个值

transform: matrix(2,-0.35,0.35,2,0,0);

这些值并不完全直接，涉及到数学（如果你是美国人的话，可能只有一个数学），如果你真的想解决（不仅在简洁性上，而且在精度上也都有好处），可能值得看看 规范。

原点

还有一个重要方面缺失。如果你正在变换一个框，还有一个额外的参数涉及：变换的原点。例如，如果你在旋转，默认情况下，它将围绕框的中心点旋转；如果你有一张卡片，在中间插了一个图钉，然后把它贴在你的额头上（不要这样做），卡片就会从中间旋转。但是，你可以使用 transform-origin 来改变图钉插在卡片的位置。

transform-origin: 0 0;

这个例子将告诉框从左上角变换（在上一个例子中是旋转），第一个“0”是水平方向，第二个是垂直方向。当然，这些值可以不同——就像所有其他 x-y 值一样，你可以使用常见的 center、top、right、bottom、left、长度和百分比值，包括负值。