From d78c3c3dfdc81bb2a8273f74314ca2a9db9d88ac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 1 Feb 2022 23:00:07 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/offset-rotate/index.md | 129 +++++++++++++++----------------- 1 file changed, 62 insertions(+), 67 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/offset-rotate/index.md b/files/ja/web/css/offset-rotate/index.md index dc424f3a88..893670b462 100644 --- a/files/ja/web/css/offset-rotate/index.md +++ b/files/ja/web/css/offset-rotate/index.md @@ -3,29 +3,27 @@ title: offset-rotate slug: Web/CSS/offset-rotate tags: - CSS - - CSS Motion Path - - CSS Property - - CSS プロパティ - CSS モーションパス - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - offset-rotate - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.offset-rotate translation_of: Web/CSS/offset-rotate --- -
{{CSSRef}}
+{{CSSRef}} -

offset-rotate は CSS のプロパティで、要素が {{cssxref("offset-path")}} に沿って配置された場合の向き/方向を定義します。

+**`offset-rotate`** は CSS のプロパティで、要素が {{cssxref("offset-path")}} に沿って配置された場合の向き/方向を定義します。 -
{{EmbedInteractiveExample("pages/css/offset-rotate.html")}}
+{{EmbedInteractiveExample("pages/css/offset-rotate.html")}} -
-

注: 初期のころの仕様書では、このプロパティを motion-rotation と呼んでいました。

-
+> **Note:** 初期のころの仕様書では、このプロパティを `motion-rotation` と呼んでいました。 -

構文

+## 構文 -
/* パスの方向に従い、任意で角度を追加 */
+```css
+/* パスの方向に従い、任意で角度を追加 */
 offset-rotate: auto;
 offset-rotate: auto 45deg;
 
@@ -34,43 +32,48 @@ offset-rotate: reverse;
 
 /* パスの位置に関係なく、決められた回転を維持する */
 offset-rotate: 90deg;
-offset-rotate: .5turn;
- -
-
auto
-
-

要素は正方向の X 軸から見た {{cssxref("offset-path")}} 方向の角度で回転します。これが既定値です。

-
-
{{cssxref("<angle>")}}
-
-

要素は指定された回転角によって、時計方向に固定値で回転変換されます。

-
-
auto <angle>
-
-

auto に {{cssxref("<angle>")}} が続いた場合、その角度がautoの計算値に加算されます。

-
-
reverse
-
-

要素は auto と同様に回転しますが、反対方向を向きます。 auto 180deg の値を指定したのと同等です。

-
-
-
- -

形式文法

+offset-rotate: .5turn; + +/* グローバル値 */ +offset-rotate: inherit; +offset-rotate: initial; +offset-rotate: revert; +offset-rotate: unset; +``` + +- `auto` + - : 要素は正方向の X 軸から見た {{cssxref("offset-path")}} 方向の角度で回転します。これが既定値です。 +- `{{cssxref("<angle>")}}` + - : 要素は指定された回転角によって、時計方向に固定値で回転変換されます。 +- `auto ` + - : `auto` に {{cssxref("<angle>")}} が続いた場合、その角度が `auto` の計算値に加算されます。 +- `reverse` + - : 要素は `auto` と同様に回転しますが、反対方向を向きます。 `auto 180deg` の値を指定したのと同等です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### オフセットパスに沿って要素の方向を設定 -

HTML

+#### HTML -
<div></div>
-<div></div>
-<div></div>
+```html +
+
+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   width: 40px;
   height: 40px;
   background: #2BC4A2;
@@ -94,33 +97,25 @@ div:nth-child(3) {
   100% {
     offset-distance: 100%;
   }
-}
+} +``` + +#### 結果 -

結果

+{{EmbedLiveSample('Setting_element_orientation_along_its_offset_path', '100%', '200')}} -

{{EmbedLiveSample('Examples', '100%', '200')}}

+## 仕様書 -

仕様書

+{{Specifications}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}}{{Spec2('Motion Path Level 1')}}初回定義
+## ブラウザーの互換性 -

{{cssinfo}}

+{{Compat}} -

ブラウザーの互換性

+## 関連情報 -

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

+- {{cssxref("offset")}} +- {{cssxref("offset-anchor")}} +- {{cssxref("offset-distance")}} +- {{cssxref("offset-path")}} +- {{cssxref("offset-position")}} -- cgit v1.2.3-54-g00ecf