Movatterモバイル変換

[0]ホーム
URL:

  1. Web
  2. CSS
  3. Reference
  4. Values
  5. <transform-function>
  6. rotate3d()

rotate3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Therotate3d()CSSfunction defines a transformation that rotates an element around afixed axis in 3D space, without deforming it. Its result is a<transform-function> data type.

Try it

transform: rotate3d(0, 0, 0, 0);
transform: rotate3d(1, 1, 1, 45deg);
transform: rotate3d(2, -1, -1, -0.2turn);
transform: rotate3d(0, 1, 0.5, 3.142rad);
<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div>  </div></section>
#default-example {  background: linear-gradient(skyblue, khaki);  perspective: 550px;}#example-element {  width: 100px;  height: 100px;  transform-style: preserve-3d;}.face {  display: flex;  align-items: center;  justify-content: center;  width: 100%;  height: 100%;  position: absolute;  backface-visibility: inherit;  font-size: 60px;  color: white;}.front {  background: rgb(90 90 90 / 0.7);  transform: translateZ(50px);}.back {  background: rgb(0 210 0 / 0.7);  transform: rotateY(180deg) translateZ(50px);}.right {  background: rgb(210 0 0 / 0.7);  transform: rotateY(90deg) translateZ(50px);}.left {  background: rgb(0 0 210 / 0.7);  transform: rotateY(-90deg) translateZ(50px);}.top {  background: rgb(210 210 0 / 0.7);  transform: rotateX(90deg) translateZ(50px);}.bottom {  background: rgb(210 0 210 / 0.7);  transform: rotateX(-90deg) translateZ(50px);}

In 3D space, rotations have three degrees of freedom, which together describe a single axis of rotation. The axis ofrotation is defined by an [x, y, z] vector and pass by the origin (as defined by thetransform-originproperty). If, as specified, the vector is notnormalized (i.e., if the sum of the square of its threecoordinates is not 1), theuser agent will normalize it internally. A non-normalizable vector, such asthe null vector, [0, 0, 0], will cause the rotation to be ignored, but without invalidating the whole CSS property.

Note:Unlike rotations in the 2D plane, the composition of 3D rotations is usuallynot commutative. In other words, the order in which the rotations are applied impacts the result.

Syntax

css
rotate3d(x, y, z, a)

Values

x

Is a<number> describing the x-coordinate of the vector denoting the axis of rotation whichcan be a positive or negative number.

y

Is a<number> describing the y-coordinate of the vector denoting the axis of rotation whichcan be a positive or negative number.

z

Is a<number> describing the z-coordinate of the vector denoting the axis of rotation whichcan be a positive or negative number.

a

Is an<angle> representing the angle of the rotation. A positive angle denotes a clockwiserotation, a negative angle a counter-clockwise one.

Cartesian coordinates onℝ^2 This transformation applies to the 3D space and can't be represented on the plane.
Homogeneous coordinates onℝℙ^2
Cartesian coordinates onℝ^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))y⋅sin(a)+xz(1−cos(a))−x⋅sin(a)+yz(1−cos(a))1+(1−cos(a))(z2−1))\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a))\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a))\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1)\end{pmatrix}
Homogeneous coordinates onℝℙ^3
(1+(1−cos(a))(x2−1)z⋅sin(a)+xy(1−cos(a))−y⋅sin(a)+xz(1−cos(a))0−z⋅sin(a)+xy(1−cos(a))1+(1−cos(a))(y2−1)x⋅sin(a)+yz(1−cos(a))0y⋅sin(a)+xz(1−cos(a))−x⋅sin(a)+yz(1−cos(a))1+(1−cos(a))(z2−1)00001)\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a)) & 0\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a)) & 0\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1) & 0\\0 & 0 & 0 & 1\end{pmatrix}

Formal syntax

<rotate3d()> =
rotate3d(<number> ,<number> ,<number> ,[<angle>|<zero>])

Examples

Rotating on the y-axis

HTML

html
<div>Normal</div><div>Rotated</div>

CSS

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

Result

Rotating on a custom axis

HTML

html
<div>Normal</div><div>Rotated</div>

CSS

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

Result

Specifications

Specification
CSS Transforms Module Level 2
# funcdef-rotate3d

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.

[8]ページ先頭
©2009-2026 Movatter.jp