From a81cea7d8b08d1765dcc5ea62e6238dd1d596a05 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 02:21:04 +0900 Subject: CSS 座標変換関数のリファレンスを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/21 時点の英語版に同期 --- .../web/css/transform-function/rotate()/index.md | 296 +++++++++++++++------ 1 file changed, 215 insertions(+), 81 deletions(-) (limited to 'files/ja/web/css/transform-function/rotate()') diff --git a/files/ja/web/css/transform-function/rotate()/index.md b/files/ja/web/css/transform-function/rotate()/index.md index 38d18aca73..680dadc756 100644 --- a/files/ja/web/css/transform-function/rotate()/index.md +++ b/files/ja/web/css/transform-function/rotate()/index.md @@ -3,65 +3,214 @@ title: rotate() slug: Web/CSS/transform-function/rotate() tags: - CSS - - CSS 変換 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.rotate translation_of: Web/CSS/transform-function/rotate() --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の rotate() 関数は、要素を二次元平面上の特定の点を中心に、変形させずに回転させます。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -

要素が回転する中心となる特定の点 — 前述 — は、変形原点とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。

+要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 -

構文

+## 構文 -

rotate() で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180度で回転したものは点対称と呼ばれます。

+`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 -
rotate(a)
-
+```css +rotate(a) +``` -

値

+### 値 -
-
a
-
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
-
+- _a_ + - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 + 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ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]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ cos + ( + a + ) - + sin + ( + a + ) + sin + ( + a + ) cos + ( + a + ) + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 0 0 0 0 1 +
[cos(a) sin(a) -sin(a) cos(a) 0 0]
-

例

+## 例 -

基本的な例

+

基本的な例

-

HTML

+#### HTML -
<div>Normal</div>
-<div class="rotated">Rotated</div>
+```html +
Normal
+
Rotated
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -71,27 +220,29 @@ translation_of: Web/CSS/transform-function/rotate()
   transform: rotate(45deg); /* rotateZ(45deg) と等価 */
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Basic_example", "auto", 180)}}

+{{EmbedLiveSample("Basic_example", "auto", 180)}} -

回転とその他の変形の組み合わせ

+

回転とその他の変形の組み合わせ

-

複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。

+複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 -

HTML

+#### HTML -
<div>Normal</div>
-<div class="rotate">Rotated</div>
-<div class="rotate-translate">Rotated + Translated</div>
-<div class="translate-rotate">Translated + Rotated</div>
-
+```html +
Normal
+
Rotated
+
Rotated + Translated
+
Translated + Rotated
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   position: absolute;
   left: 40px;
   top: 40px;
@@ -115,39 +266,22 @@ translation_of: Web/CSS/transform-function/rotate()
   background-color: gold;
   transform: translateX(180px) rotate(45deg);
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}}

+{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) -- cgit v1.2.3-54-g00ecf