CSS - transform-style 屬性

CSS 屬性transform-style 決定元素的子元素是放置在三維空間中，還是壓平在元素的平面內。

壓平時，元素的子元素不會在三維空間中單獨出現。

由於此屬性不會繼承，因此應為指定元素的所有非葉子後代設定此屬性。

可能的值

CSS 屬性transform-style 可以具有以下值之一

flat：指定元素的子元素放置在元素的平面內。這是預設值。
preserve-3d：指定元素的子元素放置在三維空間中。

應用於

所有可變換的元素。

語法

transform-style = flat | preserve-3d

CSS transform-style - flat 值

以下示例演示了transform-style: flat 與 transform 函式一起使用的用法

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: flat;
      transform: rotate(30deg);
      margin-bottom: 80px;
      padding: 30px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 
</style>
</head>
<body>
   <div class="container">
   <div class="cube">
      <div class="face front">1</div>
      <div class="face back">2</div>
      <div class="face right">3</div>
      <div class="face left">4</div>
      <div class="face top">5</div>
      <div class="face bottom">6</div>
   </div>
   </div>
</body>
</html>

CSS transform-style - preserve-3d 值

以下示例演示了transform-style: preserve-3d 與 transform 函式一起使用的用法

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: preserve-3d;
      transform: rotate3d(1, 1, 1, 30deg);
      margin-bottom: 80px;
      padding: 30px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 
</style>
</head>
<body>
   <div class="container">
   <div class="cube">
      <div class="face front">1</div>
      <div class="face back">2</div>
      <div class="face right">3</div>
      <div class="face left">4</div>
      <div class="face top">5</div>
      <div class="face bottom">6</div>
   </div>
   </div>
</body>
</html>

列印頁面