【CSS】「transform-style」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「transform-style」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「transform-style」プロパティを使うと「子要素を3D空間に配置するかどうか」の指定をすることができます。

また、下の動画でもCSSの「transform-style」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「transform-style」プロパティを使うと何ができるのか？

<div class="container">
    <div class="box">
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
    </div>
    <div class="box d2">
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
    </div>
</div>

.container {
    width: 700px;
    margin: 150px auto;
    display: flex;
    justify-content: space-between;
}
.box {
    width: 300px;
    transition-duration: 1s;
    position: relative;
    rotate: 1 1 1 -20deg;
    transform-style: preserve-3d;
}
.d2 {
    transform-style: flat;
}
.surface {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    opacity: 0.7;
    border: 3px solid #333;
    position: absolute;
    top: 0;
    left: 0;
}
.surface:nth-child(1) {
    translate: 0 0 100px;
}
.surface:nth-child(2) {
    rotate: x 90deg;
    translate: 0 100px;
}
.surface:nth-child(3) {
    rotate: x 90deg;
    translate: 0 -100px;
}
.surface:nth-child(4) {
    rotate: y 90deg;
    translate: -100px;
}
.surface:nth-child(5) {
    rotate: y 90deg;
    translate: 100px;
}
.surface:nth-child(6) {
    translate: 0 0 -100px;
}

「transform-style」プロパティを使うと「子要素を3D空間に配置するかどうか」の指定をすることができます。

上の画像の左側の要素は「3D空間」に配置されているので立体的になっているのに対して、右側の要素は「2D空間」に配置されているので、見え方が大きく異なっています。

※「transform-style」以外のプロパティは全て一緒です。

なるほど！

「transform-style」の使い方！

それでは「transform-style」の使い方をまとめていきますね！

「transform-style」に指定できる値は？

「transform-style」に指定できる値は下記の通りです。

• flat　初期値
• preserve-3d

これら２つのキーワードを使うことができます。

「flat」を使うと？（初期値）

「transform-style」に「flat」を使うと、子要素は「2D空間」に配置されます。

これが初期値になります。なので立体的に要素を配置したい場合は、しっかり設定してあげる必要があるのです。

「preserve-3d」を使うと？

「transform-style」に「preserve-3d」を使うと、子要素は「3D空間」に配置されます。

このキーワードを使うことで、子要素を立体的に配置することが可能となります。

「子要素」が立体的に配置できる。

「transform-style」は「子要素」を立体的に配置することができます。

なので、立体的に配置したい要素自体に設定する訳ではないので、そこに注意してください。

「transform-style」は「継承しない」

「transform-style」は「継承しない」ので、子要素のさらに子要素などの子孫要素も立体的に配置したい場合は、複数回の「transform-style」の設定が必要になるので、その辺も注意してください。

参考リンク！

仕様書。
https://drafts.csswg.org/css-transforms-2/#transform-style-property

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/transform-style

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「transform-style」プロパティを使うと「子要素を3D空間に配置するかどうか」の指定をすることができる。

「transform-style」に指定できる値は下記の通りです。

• flat　初期値
• preserve-3d

「transform-style」に「flat」を使うと、子要素は「2D空間」に配置され、

「transform-style」に「preserve-3d」を使うと、子要素は「3D空間」に配置される。

「transform-style」を使うと「子要素」が立体的に配置できる。

「transform-style」は「継承しない」

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「transform-style」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！