1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: rotate3d()
slug: Web/CSS/transform-function/rotate3d()
tags:
- CSS
translation_of: Web/CSS/transform-function/rotate3d()
---
<div>{{CSSRef}}</div>
<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.</div>
<div> </div>
<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
<p>In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not <em>normalized</em> (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.</p>
<div class="note"><strong>Note:</strong> Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.</div>
<h2 id="Syntax">Syntax</h2>
<p>The amount of rotation created by <code>rotate3d()</code> is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <code><number></code>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <code><angle></code> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p>
<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
</pre>
<h3 id="Values">Values</h3>
<dl>
<dt><code>x</code></dt>
<dd>Is a {{cssxref("<number>")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
<dt><code>y</code></dt>
<dd>Is a {{cssxref("<number>")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
<dt><code>z</code></dt>
<dd>Is a {{cssxref("<number>")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
<dt><code>a</code></dt>
<dd>Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
</dl>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
<td rowspan="2">This transformation applies to the 3D space and can't be represented on the plane.</td>
</tr>
<tr>
<th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
</tr>
<tr>
<th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
<td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
</tr>
<tr>
<th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
<td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
</tr>
</tbody>
</table>
<h2 id="Examples">Examples</h2>
<h3 id="Rotating_on_the_y-axis">Rotating on the y-axis</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>Normal</div>
<div class="rotated">Rotated</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">body {
perspective: 800px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate3d(0, 1, 0, 60deg);
background-color: pink;
}
</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}</p>
<h3 id="Rotating_on_a_custom_axis">Rotating on a custom axis</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div>Normal</div>
<div class="rotated">Rotated</div></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">body {
perspective: 800px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate3d(1, 2, -1, 192deg);
background-color: pink;
}
</pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> data type for compatibility info.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("<transform-function>")}}</li>
</ul>
|
