css2d转换_CSS2D转换：倾斜，缩放和转换

css 2d转换

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

歪斜 (skew)

skew is probably the trickiest of these to understand, as its values (in degrees) don&＃39;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可能是其中最难理解的&＃xff0c;因为它的值(以度为单位)似乎并没有像人们期望的那样适用。 对我而言&＃xff0c;考虑偏斜的最简单方法是将值视为在元素框的相对侧“拉”以创建指定的角度。 为了清楚起见&＃xff0c;显示CSS声明没有供应商前缀 &＃xff1a;

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.

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

规模 (scale)

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

scale只是一个标量值&＃xff1a;一个乘数&＃xff0c;元素的大小将以此乘数减小或增大&＃xff1a;

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

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

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