CSS プロパティ transform-style

CSS プロパティ transform-style: 子要素の3D空間を制御する

CSS プロパティ transform-style: 子要素の3D空間を制御する

transform-style プロパティは、ネストされた要素がどのように三次元空間でレンダリングされるかを指定します。変換された子要素を二次元平面にフラット化するのか、三次元位置を保持するのかを決定します。

1. 構文と値

  • transform-style: flat; (初期値)
    • 変換された子要素は二次元平面にフラット化されます。つまり、子要素のすべての 3D 変換は、親要素の平面に対して行われます。
  • transform-style: preserve-3d;
    • 変換された子要素は三次元位置を保持します。つまり、子要素の 3D 変換は、親要素の 3D 空間に対して行われます。

サンプルコード:


<div class="parent">
  <div class="child"></div>
</div>


.parent {
  transform: rotateX(45deg);
  transform-style: preserve-3d; /* 子要素は3D位置を保持 */
}
.child {
  transform: rotateY(45deg);
}

2. 動作原理

transform-style プロパティは、transform プロパティが適用された要素の子要素にのみ影響します。親要素に変換が適用されていない場合、このプロパティは無効になります。

3. 使用シーン

  • 3Dシーンの作成: Webページ上にリアルな奥行き感のある3Dシーンを作成する場合、transform-style: preserve-3d; は不可欠です。たとえば、回転する立方体を作成し、各面を独立した要素にすることができます。
  • 高度なアニメーション効果の実現: transform-style プロパティは、perspective や backface-visibility などの他の CSS プロパティと組み合わせて使用​​して、より複雑な 3D アニメーション効果を作成できます。

4. ブラウザの互換性

transform-style プロパティは、すべての主要なブラウザで十分にサポートされています。詳細については、Can I use を参照してください。

5. 例

以下のコードは、transform-style: preserve-3d; を使用して単純な回転する立方体を作成する方法を示しています。


<!DOCTYPE html>
<html>
<head>
<style>
.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 5s infinite linear;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.5);
  border: 1px solid black;
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="cube">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face right"></div>
  <div class="face left"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>
</body>
</html>

この例では、transform-style: preserve-3d; が .cube 要素に適用され、すべての子要素 (.face) が 3D 位置を保持します。各 .face 要素は立方体の異なる面に配置され、transform プロパティを使用して回転および平行移動され、3D 効果を作成します。

6. 参考文献

Q&A

Q1: transform-style: preserve-3d; を設定しても3D効果が得られないのはなぜですか？

A1: 考えられる原因はいくつかあります。

  • 親要素に perspective プロパティが設定されていない。
  • 子要素の backface-visibility プロパティが hidden に設定されている。
  • ブラウザの互換性の問題。

これらの点をチェックして、問題を解決してください。

Q2: transform-style プロパティは、どのような場合に役立ちますか？

A2: transform-style プロパティは、複雑な3Dレイアウトやアニメーションを作成する場合に特に役立ちます。たとえば、回転する立方体、飛び出す絵本のような効果、奥行きのあるカルーセルなどを作成することができます。

Q3: transform-style: preserve-3d; を使用する場合の注意点は何ですか？

A3: transform-style: preserve-3d; を使用すると、パフォーマンスに影響を与える可能性があります。特に、モバイルデバイスなど、処理能力の低いデバイスでは注意が必要です。複雑な3Dシーンを作成する場合は、パフォーマンスを最適化するために、要素の数やアニメーションの複雑さを調整する必要がある場合があります。