HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Style transformStyleプロパティの使い方を徹底解説

HTML DOMのtransformStyleプロパティは、HTML文書内の要素に対して2Dまたは3D変換を取得・適用するために使用されます。特に、子要素の3D位置情報を保持するかどうかを制御したい場合に活用できる重要なスタイルプロパティです。

構文

transformStyleプロパティの基本的な構文は以下の通りです。

値の取得

object.style.transformStyle

値の設定

object.style.transformStyle = "value"

設定できる値

transformStyleプロパティには、以下の値を指定できます。

値説明
inherit親要素からこのプロパティの値を継承します。
initialこのプロパティをデフォルト値に設定します。
flat子要素が3D位置を保持しないように設定します（デフォルト値）。
preserve-3d子要素が3D位置を保持するように設定します。

サンプルコード

それでは、HTML DOM StyleのtransformStyleプロパティを使用した具体的な例を見てみましょう。ボタンをクリックすると、内側のボックスに「preserve-3d」が適用され、3D変換の状態が変化します。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background: lightgreen;
        height: 100vh;
        text-align: center;
    }
    .outer-box {
        position: relative;
        height: 200px;
        width: 200px;
        margin: 80px;
        padding: 5px;
        border: 2px solid black;
    }
    .inner-box1 {
        padding: 50px;
        position: absolute;
        background-color: coral;
        transform: rotateY(40deg);
    }
    .inner-box2 {
        padding: 40px;
        position: absolute;
        background-color: lightblue;
        transform: rotateY(60deg);
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>DOM Style transformStyle プロパティの例</h1>
<div class="outer-box">Outer Box
<div class="inner-box1">Inner Box1
<div class="inner-box2">Inner Box2</div>
</div>
</div>
<button onclick="add()" class="btn">transformStyleを設定</button>
<script>
    function add() {
        document.querySelector(".inner-box1").style.transformStyle = "preserve-3d";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が表示されます。

HTML DOM Style transformStyleプロパティの使い方を徹底解説

「transformStyleを設定」ボタンをクリックすると、Inner Box1に対してpreserve-3dスタイルが適用され、子要素の3D位置が保持されるようになります。

HTML DOM Style transformStyleプロパティの使い方を徹底解説

まとめ

transformStyleプロパティは、CSSの3D変換を扱う上で欠かせないプロパティです。「flat」を指定した場合は子要素の3D空間が平坦化され、「preserve-3d」を指定することでネストした要素同士の立体的な位置関係が維持されます。JavaScriptから動的に切り替えることで、インタラクティブな3D表現を実装できます。

  1. HTML DOM スタイルの quotes プロパティの使い方を徹底解説

    HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri

  2. HTML DOM スタイルの textTransform プロパティとは？使い方を解説

    DOM スタイルの textTransform プロパティは、HTML ドキュメント内の要素のテキストに対して、大文字・小文字への変換を取得（参照）および適用するために使用されます。JavaScript から動的にテキストの表示形式を変更したい場合に便利なプロパティです。 構文 textTransform プロパティの基本的な構文は以下のとおりです。 値の取得（Returning textTransform） object.style.textTransform 値の設定（Modifying textTransform） object.style.textTransform = value;