CSS 3D 變換屬性：transform 和 perspective

CSS 3D 變換屬性：transform 和perspective，需要具體程式碼範例

CSS 3D 變換屬性是一種強大的技術，可以透過一些簡單的程式碼實作命令人驚嘆的視覺效果。其中，最常用的兩個屬性是 transform 和 perspective。

一、transform 屬性

transform 屬性用於旋轉元素、縮放、傾斜、移動等操作。它可以透過設定不同的參數來實現不同的效果。

1. 旋轉

可以透過設定 rotate 參數來實現對元素的旋轉。例如：

div {
  transform: rotate(45deg);
}

2. 縮放

可以透過設定 scale 參數來實現對元素的縮放。例如：

div {
  transform: scale(1.5);
}

3. 傾斜

可以透過設定 skew 參數來實現對元素的傾斜。例如：

div {
  transform: skew(30deg);
}

4. 移動

可以透過設定 translate 參數來實現對元素的移動。例如：

div {
  transform: translate(100px, 50px);
}

二、perspective 屬性

perspective 屬性用於定義三維場景中的觀察點，影響元素的透視效果。它可以透過設定不同的參數來改變元素的透視感。

div {
  perspective: 800px;
}

設定完 perspective 屬性後，我們需要搭配使用 transform-style 屬性將元素的子元素也套用透視效果。

div {
  perspective: 800px;
  transform-style: preserve-3d;
}

三、套用到實例

下面透過一個例子來示範如何使用 transform 和 perspective 屬性實作一個立方體效果。

HTML 程式碼如下：

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

CSS 程式碼如下：

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  animation: spin 6s linear infinite;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

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

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

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

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

以上程式碼實作了一個簡單的立方體，並透過 transform 和 perspective 屬性實現了旋轉和透視效果。你可以自己運行程式碼查看效果。

綜上所述，CSS 3D 變換屬性 transform 和 perspective 是製作精美視覺效果的重要工具，透過簡單的程式碼，我們可以實現各種酷炫的動畫效果，提升網頁的視覺吸引力。

以上是CSS 3D 變換屬性：transform 和 perspective的詳細內容。更多資訊請關注PHP中文網其他相關文章！