「CSS」transform-styleプロパティで子の要素を3D表示するサンプル

2022年8月4日

環境
Google Chrome 104.0.5112.80
Windows 10 Home 64bit

構文
1.transform-style:値
transform-styleプロパティのpreserve-3dは、子の要素を3D表示します。
preserve-3d 子の要素を3D表示します。
flat 子の要素を2D表示します。(初期値)
2.perspective は CSS のプロパティで、 z=0 の平面とユーザーとの間の
距離を定めて三次元に配置された要素に遠近感を与えます。
3.rotateX() は CSS の関数で、要素の形を変化させずに横座標
(水平軸) の周りを回転させる変形を定義します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .fct {
    background-color: rgba(0,0,255,0.5);
    border: 1px solid black;
    width: 150px;
    /*子の要素を3D表示*/
    transform-style: preserve-3d;
  }
  .ct {
    background-color: yellow;
    border: 1px solid black;
    width: 150px;
    transform: perspective(100px) rotateX(10deg);
  }
</style>
</head>
<body>
  <!-- 親要素-->
  <div class="fct">
  　<!--子要素 -->
    <div class="ct">東京tokyo</div>
  </div>

</body>
</html>

結果
div要素「ct」を3D表示します,rotateX(10deg)は縦向きに回転させます。

CSS

Posted by arkgame