From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/css/transform-function/rotate()/index.html | 90 ++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 files/zh-cn/web/css/transform-function/rotate()/index.html (limited to 'files/zh-cn/web/css/transform-function/rotate()') diff --git a/files/zh-cn/web/css/transform-function/rotate()/index.html b/files/zh-cn/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..a412aa9362 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotate()/index.html @@ -0,0 +1,90 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +tags: + - CSS + - CSS函数 + - CSS变换 +translation_of: Web/CSS/transform-function/rotate() +--- +
{{CSSRef}}
+ +
CSS的rotate()函数定义了一种将元素围绕一个定点（由{{ Cssxref("transform-origin") }}属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。
+ +
+ +

元素旋转的固定点 - 如上所述 - 也称为变换原点。这默认为元素的中心，但你可以使用{{ cssxref("transform-origin") }}属性设置自己的自定义变换原点。

+ +

语法

+ +

{{cssxref("<angle>")}} 指定了 rotate() 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为点反演。

+ +
rotate(a)
+
+ +

值

+ +
+
a
+
是一种{{ cssxref("<angle>") }}，表示旋转的角度。 正角度表示了顺时针的旋转，负角度表示逆时针的旋转。
+
+ + + + + + + + + + + + + + + + + + + + + +
+

笛卡尔坐标系 on ℝ2

+ 		齐次坐标系　on ℝℙ2笛卡尔坐标系 on ℝ3齐次坐标系 on ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +

示例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("示例","100%","200")}}

+ +

浏览器兼容

+ +

有关兼容性信息，请参阅<transform-function>数据类型。

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf