From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../web/css/transform-function/rotate3d/index.html | 128 +++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/zh-cn/web/css/transform-function/rotate3d/index.html (limited to 'files/zh-cn/web/css/transform-function/rotate3d') diff --git a/files/zh-cn/web/css/transform-function/rotate3d/index.html b/files/zh-cn/web/css/transform-function/rotate3d/index.html new file mode 100644 index 0000000000..1dab01c6aa --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,128 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - 3D + - CSS + - CSS Transforms +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +--- +
{{CSSRef}}
+ +

rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。

+ +
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
+ + + +

在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 {{ cssxref("transform-origin") }} CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果（译者注：如transform中的多项变换）。

+ +
与平面旋转相反的是，3D旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。
+ +

语法

+ +
rotate3d(x, y, z, a)
+
+ +

值

+ +
+
x
+
 {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。
+
y
+
{{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。
+
z
+
{{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。
+
a
+
 {{ cssxref("<angle>") }} 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
+
+ + + + + + + + + + + + + + + + + + + +
在ℝ2上的笛卡尔坐标这种变换应用于3D空间，不可用于平面空间
在ℝℙ2上的齐次坐标
在ℝ3上的笛卡尔坐标 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
在ℝℙ3上的齐次坐标
+ +

示例

+ +

绕Y轴旋转

+ +

HTML

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

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+ +

效果

+ +

{{EmbedLiveSample("绕Y轴旋转","100%","200")}}

+ +

围绕自定义轴旋转

+ +

HTML

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

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+ +

效果

+ +

{{EmbedLiveSample("围绕自定义轴旋转","100%","200")}}

+ +

浏览器兼容

+ +

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

+ +

参见

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