html修改cssCSS Transform

.class { transform: rotate(90deg) scale(2) translate(100px, 200px);}

transform通过组合多个变换函数来得到所需的输出，因此为了理解transform您须要理解每个transform函数。

可能最随意马虎理解的变换函数是rotate. 此函数采取单个参数，即旋转元素的角度。
正值将导致顺时针旋转，负值将导致逆时针旋转。

.red { transform: rotate(10deg);}.green { transform: rotate(-45deg);}.blue { transform: rotate(.25turn);}

正如您在上面的示例中看到的，我们利用deg和turn单位来定义我们的旋转。
deg单位从 0 到 360，而turn单位从 0 到 1。

rotateX您还可以利用、rotateY和rotateZ函数进行 3D 旋转。
该rotateZ功能的事情事理与rotate.

rotateX将在水平轴上rotateY旋转一个元素，并将在垂直轴上旋转一个元素。
这些可用于翻转元素。

.red { transform: rotateX(60deg);}.green { transform: rotateY(60deg);}.blue { transform: rotateX(.2turn) rotateY(.2turn);}

如您所见，我们在 3D 空间中旋转元素，使其看起来被挤压。
这种旋转实际上只在处理 3D 元素时才有用。

scale是另一个很随意马虎理解的函数。
它可以采取一个或两个参数来确定元素大小的缩放比例。
大于 1 的数字会使元素变大，而小于 1 的数字会缩小元素。

.red { transform: scale(1.25);}.green { transform: scale(.5);}.blue { transform: scale(1.25, .75);}

当一个参数被通报给scale它时，它会根据通报的数字缩放 X 和 Y 轴相同的量。
当两个值通报给scale第一个数字时，将缩放 X 轴，第二个数字将缩放 Y 轴。

此外，如果您乐意，可以利用scaleXandscaleY函数来缩放 X 或 Y 轴。
这些函数采取一个参数并在相应轴上缩放元素。

就像rotate您可以在 3D 中缩放一样。
为此，您将利用与 and 类似的函数scaleZ，但用于 Z 轴。
这同样只对 3D 元素有用。
scaleX``scaleY

可能我最喜好的转换元素的方法是利用translate函数。
这个函数像scale函数一样接管一个或两个参数，并将根据供应的值移动一个元素。

.red { transform: translate(25px);}.green { transform: translate(-25px, 25px);}.blue { transform: translate(0, -25px);}

透明的彩色箭头表示形状常日放置的位置，而不透明的箭头表示它们在平移后的位置。

你会把稳到，当只有一个值被通报给它时，translate它只会影响 X 轴，因此元素向右移动 25 个像素，由于它是一个正值。

当将两个值通报给translate第一个值时，会在 X 轴上移动元素，而第二个值会影响 Y 轴的位置。
这意味着绿色箭头向左移动 25 个像素，向下移动 25 个像素。
正 Y 值将元素向下移动彷佛令人困惑，由于我们常日认为正 Y 意味着向上，但在 Web 开拓中，正 Y 值意味着元素在页面中向下移动。

末了，蓝色箭头向上移动了 25 个像素，由于第一个参数设置为 0，第二个参数设置为负 25 个像素。

就像 scale 一样，有一个translateX和translateY函数可以一次只在一个方向上移动一个元素。

该translate属性处理百分比的办法与险些所有其他 CSS 属性不同，由于它基于元素的大小而不是其父级的大小。

.red { transform: translate(100%);}

正如你所看到的，当我们用百分比平移时，我们将元素向右移动了其自身宽度的 100%。
这对付通过将元素移动其自身宽度的 50% 或将元素彼此偏移其大小的百分最近使元素居中非常有用。

您现在可能已经猜到了，但translate也可以在 3D 中利用。
您可以利用translateZ仅修正 Z 轴的函数或translate3D类似 的函数translate，但接管第三个参数来在 Z 轴上移动元素。
同样，这仅对 3D 元素有用。

可能所有transform功能中最没用的是skew. 它许可您通过倾斜形状的边缘来拉伸形状。
该skew函数接管一两个参数，就像translate.

.red { transform: skew(25deg);}.green { transform: skew(15deg, 25deg);}.blue { transform: skew(-15deg, -25deg);}

如您所见，skew 属性在 X 和 Y 方向上拉伸了我们的形状。
通过指定一个参数，我们只在 X 方向上倾斜，而如果我们通报两个属性，第一个在 X 方向上倾斜，第二个在 Y 方向上倾斜。

此外，就像translate您可以利用skewX和skewY在一个方向上倾斜元素而不影响其他方向一样。

不同的是，所有其他transform属性skew都没有任何 3D 版本。

到目前为止，我们已经谈论了单独利用转换，但是如果您想利用多个转换怎么办？这实际上非常大略，由于您可以通报任意数量的函数transform。

.red { transform: rotate(25deg) scale(.5) translateX(50px);}.green { transform: rotate(-.5turn) translateX(-10%);}.blue { transform: scaleX(1.2) scaleY(.8);}

组合转换变得困难的唯一时候是当您想要在不同的类中修正它们时。

.base-class { transform: scale(1.2) translateX(5px);}.big { transform: scale(2) translateX(5px);}.move { transform: scale(1.2) translateX(100px);}.big.move { transform: scale(2) translateX(100px);}

由于transform是一个属性，您须要在修正的每个类之间复制所有值，transform由于如果您只是transform: scale(2)在.big类中写入，它将覆盖全体transform而不但是scale部分。
幸运的是，我们可以奥妙地利用 CSS 变量来办理这个问题。

.base-class { transform: scale(var(--scale, 1.2)) translateX(var(--translate-x, 5px));}.big { --scale: 2;}.move { --translate-x: 100px;}

如您所见，我们现在只变动 CSS 变量，而从未修正实际transform属性。

总体而言，CSStransform非常有用，同时也非常易于理解。
到目前为止，最难的部分transform是理解如何跨不同类组合多个变换，但在 CSS 变量的帮助下，这个问题是微不足道的。