Movatterモバイル変換

[0]ホーム
URL:

  1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. 値
  5. <transform-function>
  6. rotate3d()

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。

View in EnglishAlways switch to English

rotate3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

rotate3d() はCSS の関数は、要素を 3D 空間内の固定した軸を中心に、形を崩さずに回転させる座標変換を定義します。結果は<transform-function> データ型になります。

試してみましょう

transform: rotate3d(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: rgba(90, 90, 90, 0.7);  transform: translateZ(50px);}.back {  background: rgba(0, 210, 0, 0.7);  transform: rotateY(180deg) translateZ(50px);}.right {  background: rgba(210, 0, 0, 0.7);  transform: rotateY(90deg) translateZ(50px);}.left {  background: rgba(0, 0, 210, 0.7);  transform: rotateY(-90deg) translateZ(50px);}.top {  background: rgba(210, 210, 0, 0.7);  transform: rotateX(90deg) translateZ(50px);}.bottom {  background: rgba(210, 0, 210, 0.7);  transform: rotateX(-90deg) translateZ(50px);}

3D 空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は [x, y, z] ベクトルによって定義され、 (transform-origin プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが正規化されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、ユーザーエージェントが内部的に正規化します。正規化できないベクトル、例えば null ベクトル [0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。

メモ:2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文

rotate3d() で行う回転の量は、3 つの<number> および 1 つの<angle> で指定します。<number> は回転軸を表すベクトルの X, Y, Z 座標を表します。<angle> は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。

css
rotate3d(x, y, z, a)

値

x

<number> で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。

y

<number> で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。

z

<number> で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。

a

<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))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}
同次座標系 (ℝℙ^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}

例

Y 軸に沿って回転

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;}

結果

独自の軸に沿って回転

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;}

結果

仕様書

Specification
CSS Transforms Module Level 2
# funcdef-rotate3d

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.

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