From 792d028844434720896375410403882ec4a871db Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 11 Sep 2021 23:54:56 +0900 Subject: Web/CSS/transform-box を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 --- files/ja/web/css/transform-box/index.md | 119 ++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/ja/web/css/transform-box/index.md (limited to 'files/ja/web/css/transform-box/index.md') diff --git a/files/ja/web/css/transform-box/index.md b/files/ja/web/css/transform-box/index.md new file mode 100644 index 0000000000..3800f60f06 --- /dev/null +++ b/files/ja/web/css/transform-box/index.md @@ -0,0 +1,119 @@ +--- +title: transform-box +slug: Web/CSS/transform-box +tags: + - CSS + - CSS プロパティ + - CSS Transforms + - Experimental + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.transform-box +translation_of: Web/CSS/transform-box +--- +{{CSSRef}} + +CSS の **`transform-box`** プロパティは、 {{cssxref("transform")}} と {{cssxref("transform-origin")}} プロパティに関連したレイアウトボックスを定義します。 + +```css +/* キーワード値 */ +transform-box: content-box; +transform-box: border-box; +transform-box: fill-box; +transform-box: stroke-box; +transform-box: view-box; + +/* グローバル値 */ +transform-box: inherit; +transform-box: initial; +transform-box: revert; +transform-box: unset; +``` + +## 構文 + +`transform-box` プロパティは、以下のキーワードの 1 つで指定されます。 + +### 値 + +- `content-box` + - : コンテンツボックスを参照ボックスとして使用します。 {{htmlElement("table")}} の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。 +- `border-box` + - : 境界ボックスを参照ボックスとして使用します。 {{htmlElement("table")}} の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。 +- `fill-box` + - : そのオブジェクトのバウンディングボックスを参照ボックスとして使用します。 +- `stroke-box` + - : ストロークのバウンディングボックスを参照ボックスとして使用します。 +- `view-box` + - : 直近の {{Glossary("SVG")}} のビューポートを参照ボックスとして使用します。SVG ビューポートに {{SVGAttr("viewBox")}} 属性が指定されていた場合、参照ボックスは `viewBox` 属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法は `viewBox` 属性の幅と高さの値に設定されます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### SVG の transform-origin のスコープ + +この例では、以下のような SVG があるとします。 + +```html + + + + + + + +``` + +この CSS では、変換を使用して矩形を無限に回転させるアニメーションを作成しています。 `transform-box: fill-box` を使用して、変換の原点をバウンディングボックスの中心にし、矩形が所定の位置で回転するようにします。 `fill-box` がない場合、変換の原点は SVG キャンバスの中心となるため、まったく異なる効果が得られます。 + +```css +svg{ + width:80vh; + border:1px solid #d9d9d9; + position:absolute; + margin: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +#box{ + transform-origin:50% 50%; + /*+++++++++++++++++++++++++++*/ + /* if I remove this rule the pen won't work properly on Chrome for Mac, FF, Safari + Will still work properly on Chrome for PC & Opera*/ + transform-box: fill-box; + /*Alternatively I can use transform-origin:15px 15px;*/ + /*+++++++++++++++++++++++++++*/ + animation: rotateBox 3s linear infinite; +} + +@keyframes rotateBox { + to { + transform: rotate(360deg); + } +``` + +この例は [Pogany](https://codepen.io/giaco) 氏によるものです。ライブ版は[この codepen](https://codepen.io/giaco/pen/OwowJQ) をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- {{cssxref("transform")}}, {{cssxref("transform-origin")}} -- cgit v1.2.3-54-g00ecf