From 991da9bf0975e595f7cc584cdf2ea6cb8a14b7ad Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 14 Oct 2021 00:57:05 +0900 Subject: CSS 変換の各ページの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/rotate/index.html | 120 ------------------------------------- files/ja/web/css/rotate/index.md | 118 ++++++++++++++++++++++++++++++++++++ 2 files changed, 118 insertions(+), 120 deletions(-) delete mode 100644 files/ja/web/css/rotate/index.html create mode 100644 files/ja/web/css/rotate/index.md (limited to 'files/ja/web/css/rotate') diff --git a/files/ja/web/css/rotate/index.html b/files/ja/web/css/rotate/index.html deleted file mode 100644 index 20d76f9561..0000000000 --- a/files/ja/web/css/rotate/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: rotate -slug: Web/CSS/rotate -tags: - - CSS - - CSS Property - - Reference - - Transforms -translation_of: Web/CSS/rotate ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の rotate プロパティは、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。

- -

構文

- -
/* キーワード値 */
-rotate: none;
-
-/* 角度値 */
-rotate: 90deg;
-rotate: 0.25turn;
-rotate: 1.57rad;
-
-/* x, y, z 軸名と角度 */
-rotate: x 90deg;
-rotate: y 0.25turn;
-rotate: z 1.57rad;
-
-/* ベクトルと角度の値 */
-rotate: 1 1 1 90deg;
- -

値

- -
-
角度値
-
{{CSSxRef("<angle>")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。rotate() (2次元回転) 関数と等価です。
-
x, y, z 軸と角度値
-
該当する要素を回転する軸の名前 ("x", "y", "z") と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 rotateX()/rotateY()/rotateZ() (3次元回転) 関数と等価です。
-
ベクトルと角度値
-
要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 {{CSSxRef("<number>")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 rotate3d() (3次元回転) 関数と等価です。
-
none
-
回転を適用しないことを表します。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<div>
-  <p class="rotate">Rotation</p>
-</div>
- -

CSS

- - - -
.rotate {
-  transition: rotate 1s;
-}
-
-div:hover .rotate {
-  rotate: 1 -0.5 1 180deg;
-}
- -

結果

- -

{{EmbedLiveSample("Examples")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}初回定義
- -

{{CSSInfo}}

- -

ブラウザー実装状況

- -

{{Compat("css.properties.rotate")}}

diff --git a/files/ja/web/css/rotate/index.md b/files/ja/web/css/rotate/index.md new file mode 100644 index 0000000000..5bb85884ad --- /dev/null +++ b/files/ja/web/css/rotate/index.md @@ -0,0 +1,118 @@ +--- +title: rotate +slug: Web/CSS/rotate +tags: + - CSS + - CSS Property + - Reference + - Transforms +translation_of: Web/CSS/rotate +--- +{{CSSRef}}{{SeeCompatTable}} + +[CSS](/ja/docs/Web/CSS) の **`rotate`** プロパティは、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。 + +

構文

+ +
/* キーワード値 */
+rotate: none;
+
+/* 角度値 */
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+
+/* x, y, z 軸名と角度 */
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+
+/* ベクトルと角度の値 */
+rotate: 1 1 1 90deg;
+ +

値

+ +- 角度値 + - : {{CSSxRef("<angle>")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。`rotate()` (2次元回転) 関数と等価です。 +- x, y, z 軸と角度値 + - : 該当する要素を回転する軸の名前 (`"x"`, "`y`", "`z"`) と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 `rotateX()`/`rotateY()`/`rotateZ()` (3次元回転) 関数と等価です。 +- ベクトルと角度値 + - : 要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 {{CSSxRef("<number>")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 `rotate3d()` (3次元回転) 関数と等価です。 +
`none`
+ - : 回転を適用しないことを表します。 + +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<div>
+  <p class="rotate">Rotation</p>
+</div>
+ +

CSS

+ + + +
.rotate {
+  transition: rotate 1s;
+}
+
+div:hover .rotate {
+  rotate: 1 -0.5 1 180deg;
+}
+ +

結果

+ +{{EmbedLiveSample("Examples")}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}初回定義
+ +{{CSSInfo}} + +

ブラウザー実装状況

+ +{{Compat("css.properties.rotate")}} -- cgit v1.2.3-54-g00ecf