css 2d转换_CSS 2D转换：倾斜，缩放和转换

css 2d转换

Compared to

rotate, the remaining 2D transformations in CSS are probably of less utility: scale and translate have always been available in one form or another in CSS, by modifying element's width and height, or positioning them using relative or absolute position. The primary advantages of using the CSS transform values is that they are more direct, and can be animated with great ease.

rotate相比，CSS中其余的2D转换的实用性可能较低：通过修改元素的width和height ，或使用relative或absolute位置进行定位， scale和translate在CSS中始终可以以一种或另一种形式使用。 使用CSS变换值的主要优点是它们更直接，并且可以非常轻松地进行动画处理。

歪斜 (skew)

skew is probably the trickiest of these to understand, as its values (in degrees) don't appear to apply in the ways that one might expect. To me, the easiest way to consider skew is to think of the values as “pulling” on opposite sides of the element box to create the angle specified. For clarity, the CSS declaration is shown without vendor prefixes:

skew可能是其中最难理解的，因为它的值(以度为单位)似乎并没有像人们期望的那样适用。 对我而言，考虑偏斜的最简单方法是将值视为在元素框的相对侧“拉”以创建指定的角度。 为了清楚起见，显示CSS声明没有供应商前缀 ：

img#car {
	transform: skewX(21deg);
}

You can also skew vertically: skewY(21deg) ). Negative skew values will tilt the element in the opposite direction. Used together, and with careful positioning, it is possible to produce a “box” effect from three equally-sized images, a hint that 3D effects are achievable in CSS.

您还可以垂直倾斜： skewY(21deg) )。 负偏斜值将使元素沿相反方向倾斜。 结合使用并仔细定位，可以从三个大小相同的图像产生“盒子”效果，这暗示着CSS可以实现3D效果 。

规模 (scale)

scale is a simply a scalar value: a multiplier by which the size of the element is decreased or increased:

scale只是一个标量值：一个乘数，元素的大小将以此乘数减小或增大：

img#car {
	transform: scale(2);
}

As with rotate and the other CSS transformations, a scaled element does not influence its surroundings.

与rotate和其他CSS转换一样，缩放后的元素不会影响其周围环境。

当我有宽度和高度时，为什么要使用比例尺？ (Why would I use scale when I have width and height?)

Because width and height only directly influence the size of images: using the properties on anything else, such as a

constrains the shape of the element, but does not scale it, at least by default. Try putting an image and several paragraphs in a div and applying width, height and scale to see the differences.

因为width和height仅直接影响图像的大小：至少在默认情况下，在其他任何属性上使用属性(例如

约束元素的形状，但不会缩放它。 尝试将图像和几个段落放在div并应用width ， height和scale来查看差异。

Again, scale can be constrained to the x and y values alone, via scaleX and scaleY.

同样，可以通过scaleX和scaleY将scale单独限制为x和y值。

翻译 (translate)

translate moves the element from its current location. In this respect, it is very similar to relative positioning. The property doesn't offer many advantages over relative positioning in itself, but it can be animated very smoothly in CSS… examples of which we will explore next.

translate将元素从其当前位置移动。 在这方面，它与相对定位非常相似。 该属性本身相对于相对位置并没有提供很多优势，但是可以在CSS中非常流畅地进行动画处理……我们将在下面的示例中进行探讨。

img#obj {
	transform: translateX(2em);
}

翻译自: https://thenewcode.com/283/CSS-2D-Transformations-Skew-Scale-and-Translate

css 2d转换