2d旋转和3d旋转css_CSS 2D转换：旋转

最新推荐文章于 2022-08-13 15:17:35 发布

cungui5726

最新推荐文章于 2022-08-13 15:17:35 发布

阅读量240

点赞数

文章标签： css html css3 python js ViewUI

原文链接：https://thenewcode.com/274/CSS-2D-Transformations-rotate

版权

2d旋转和3d旋转css

Probably the most useful of the transformations, rotate does exactly what it says on the tin: it rotates any element. The browser should not assume the unit of measurement used, so it needs to be included for the rotation: radians (rad), turns (turn) or degrees (deg) for degrees. To provide one example, sans vendor prefixes:

rotate可能是转换中最有用的，它的功能与锡盒上所说的完全相同：旋转任何元素。浏览器不应假定使用的度量单位，因此需要包括旋转单位：弧度( rad )，转数( turn )或度数( deg )。举一个例子，没有供应商前缀：

img#inception {
	width: 400px;
	height: 267px;
	border: 15px solid #ffd;
	transform: rotate(2.5deg);
	float: left;
	margin-right: 2em;
}

The major issue that non-IE browsers have is one of smoothing and antialiasing edges of rotated elements, especially text, although this has taken dramatic steps forward in recent browser versions.

非IE浏览器的主要问题是旋转元素(尤其是文本)的平滑和抗锯齿边缘之一，尽管这在最近的浏览器版本中已迈出了重要的一步。

小费 (Tip)

You can turn on antialiasing in rotates and scales in Webkit-based browsers (Safari, Chrome) by setting box-shadow for the element to a special value:

您可以通过将元素的box-shadow设置为特殊值，在基于Webkit的浏览器(Safari，Chrome)中以旋转和缩放方式打开抗锯齿功能：

img#inception {
	box-shadow: 0 0 1px transparent;
}

There are five important features to note regarding CSS rotation:

关于CSS旋转，需要注意五个重要功能：

Rotating an element is much like using relative positioning; the original space for the element is preserved, and transforming the element causes it to lie "above" normal content. This also means that portions of the element may rotate off the page, given a large enough value.
旋转元素就像使用相对定位 ; 保留了元素的原始空间，对元素进行转换会使它位于正常内容“之上”。这也意味着在给定足够大的值的情况下，元素的某些部分可能会旋转离开页面。
Other content remains unaware of transformations: the text that wraps around the floated image above does not change just because the image is rotated, and contains to wrap around the original rectangular space that the image took up. Wrapping text around irregular shapes requires other techniques.
其他内容仍然没有意识到转换：环绕上方浮动图像的文本不会仅因为旋转图像而发生更改，而是包含环绕图像所占据的原始矩形空间的更改。将文本环绕不规则形状需要其他技术。
box-shadow effects are applied before transformation. This means that a shadow may wind up being going in an unexpected direction when an element is rotated. It is usually easiest to apply the rotation, and then experiment with appropriate shadow mapping on the transformed element.
在变换之前应用box-shadow效果。这意味着在旋转元素时，阴影可能会朝着意外方向移动。通常最简单的方法是应用旋转，然后在变换后的元素上进行适当的阴影映射实验。
Rotation is calculated from the centre of the element by default. This can be changed by altering the transform-origin property value.
默认情况下，旋转是从元素的中心开始计算的。可以通过更改transform-origin属性值来更改。
Rotation is not merely limited to images; transformation effects can be applied to any elements, as shown in the next two articles.
旋转不仅限于图像。转换效果可以应用于任何元素，如以下两篇文章所示。