diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-01 23:00:07 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-08 23:10:23 +0900 |
commit | d78c3c3dfdc81bb2a8273f74314ca2a9db9d88ac (patch) | |
tree | 837569d5a814b18c981478605a4bb4daff34bd89 /files/ja/web | |
parent | 7552219a2b9c5a049cee4aa2a5f5bc6e97f6e30e (diff) | |
download | translated-content-d78c3c3dfdc81bb2a8273f74314ca2a9db9d88ac.tar.gz translated-content-d78c3c3dfdc81bb2a8273f74314ca2a9db9d88ac.tar.bz2 translated-content-d78c3c3dfdc81bb2a8273f74314ca2a9db9d88ac.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web')
-rw-r--r-- | files/ja/web/css/offset-rotate/index.md | 129 |
1 files changed, 62 insertions, 67 deletions
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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>offset-rotate</code></strong> は CSS のプロパティで、要素が {{cssxref("offset-path")}} に沿って配置された場合の向き/方向を定義します。</p> +**`offset-rotate`** は CSS のプロパティで、要素が {{cssxref("offset-path")}} に沿って配置された場合の向き/方向を定義します。 -<div>{{EmbedInteractiveExample("pages/css/offset-rotate.html")}}</div> +{{EmbedInteractiveExample("pages/css/offset-rotate.html")}} -<div class="blockIndicator note"> -<p><strong>注</strong>: 初期のころの仕様書では、このプロパティを <code>motion-rotation</code> と呼んでいました。</p> -</div> +> **Note:** 初期のころの仕様書では、このプロパティを `motion-rotation` と呼んでいました。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css notranslate">/* パスの方向に従い、任意で角度を追加 */ +```css +/* パスの方向に従い、任意で角度を追加 */ offset-rotate: auto; offset-rotate: auto 45deg; @@ -34,43 +32,48 @@ offset-rotate: reverse; /* パスの位置に関係なく、決められた回転を維持する */ offset-rotate: 90deg; -offset-rotate: .5turn;</pre> - -<dl> - <dt><code><dfn>auto</dfn></code></dt> - <dd> - <p>要素は正方向の X 軸から見た {{cssxref("offset-path")}} 方向の角度で回転します。これが既定値です。</p> - </dd> - <dt><code>{{cssxref("<angle>")}}</code></dt> - <dd> - <p>要素は指定された回転角によって、時計方向に固定値で回転変換されます。</p> - </dd> - <dt><code><dfn>auto <angle></dfn></code></dt> - <dd> - <p><code>auto</code> に {{cssxref("<angle>")}} が続いた場合、<span class="production" id="ref-for-angle-value①③" title="Expands to: turn | rad | grad | deg">その角度</span>が<code>auto</code>の計算値に加算されます。</p> - </dd> - <dt><code><dfn>reverse</dfn></code></dt> - <dd> - <p>要素は <code>auto</code> と同様に回転しますが、反対方向を向きます。 <code>auto 180deg</code> の値を指定したのと同等です。</p> - </dd> - <dd></dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +offset-rotate: .5turn; + +/* グローバル値 */ +offset-rotate: inherit; +offset-rotate: initial; +offset-rotate: revert; +offset-rotate: unset; +``` + +- `auto` + - : 要素は正方向の X 軸から見た {{cssxref("offset-path")}} 方向の角度で回転します。これが既定値です。 +- `{{cssxref("<angle>")}}` + - : 要素は指定された回転角によって、時計方向に固定値で回転変換されます。 +- `auto <angle>` + - : `auto` に {{cssxref("<angle>")}} が続いた場合、その角度が `auto` の計算値に加算されます。 +- `reverse` + - : 要素は `auto` と同様に回転しますが、反対方向を向きます。 `auto 180deg` の値を指定したのと同等です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +### オフセットパスに沿って要素の方向を設定 -<h3 id="HTML" name="HTML">HTML</h3> +#### HTML -<pre class="brush: html notranslate"><div></div> -<div></div> -<div></div></pre> +```html +<div></div> +<div></div> +<div></div> +``` -<h3 id="CSS" name="CSS">CSS</h3> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 40px; height: 40px; background: #2BC4A2; @@ -94,33 +97,25 @@ div:nth-child(3) { 100% { offset-distance: 100%; } -}</pre> +} +``` + +#### 結果 -<h3 id="Result" name="Result">結果</h3> +{{EmbedLiveSample('Setting_element_orientation_along_its_offset_path', '100%', '200')}} -<p>{{EmbedLiveSample('Examples', '100%', '200')}}</p> +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{Specifications}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}}</td> - <td>{{Spec2('Motion Path Level 1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 -<p>{{cssinfo}}</p> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## 関連情報 -<p>{{Compat("css.properties.offset-rotate")}}</p> +- {{cssxref("offset")}} +- {{cssxref("offset-anchor")}} +- {{cssxref("offset-distance")}} +- {{cssxref("offset-path")}} +- {{cssxref("offset-position")}} |