CSS介紹Transform 3D效果

transform3d是CSS3中的一個3D變換屬性,它允許我們對HTML元素進行3D空間的變換,包括旋轉、平移、縮放等。以下是transform3d的主要用法:

3D旋轉:
- rotateX(angle): 繞X軸旋轉
- rotateY(angle): 繞Y軸旋轉
- rotateZ(angle): 繞Z軸旋轉
3D平移:
- translateX(x): X軸平移
- translateY(y): Y軸平移
- translateZ(z): Z軸平移
3D縮放:
- scaleX(x): X軸縮放
- scaleY(y): Y軸縮放
- scaleZ(z): Z軸縮放
綜合變換:
- matrix3d(): 允許同時進行多種3D變換

使用示例:

css

.box {
  transform: rotateX(45deg) translateZ(100px);
}

這個例子會使元素繞X軸旋轉45度,然後在Z軸方向上移動100像素。

要注意的是,為了使3D效果可見,通常需要設置perspective屬性來定義視距:

css

.container {
  perspective: 1000px;
}

這樣可以創建出更真實的3D效果。

可以來玩玩看

進階功能(perspective透視)

perspective屬性用於給3D定位元素的父元素定義透視距離,從而創建3D空間的深度感。它決定了觀察者與z=0平面的距離,影響3D變換元素的視覺效果。

以下是關於perspective的一些重要點:

基本語法:
css
```
perspective: <length>;
```
值的單位通常是像素(px),也可以使用其他CSS長度單位。
較小的值會產生更強烈的3D效果,較大的值則效果更溫和。
如果不設置perspective,3D變換的元素會顯得扁平,沒有深度感。
perspective-origin屬性可以用來改變視角的原點。

使用perspective的實例:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perspective Demo</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 1000px;
        }
        .box {
            width: 100%;
            height: 100%;
            background-color: #3498db;
            transform: rotateY(45deg);
            transition: transform 1s;
        }
        .container:hover .box {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

在這個例子中:

.container 元素設置了 perspective: 1000px，為其子元素創建3D空間。
.box 元素初始時繞Y軸旋轉45度。
當鼠標懸停在容器上時，盒子會旋轉180度。
transition 屬性使旋轉動畫更平滑。

嘗試調整 perspective 值來觀察效果的變化。例如，將其改為 500px 會產生更強烈的3D效果，而 2000px 則效果更溫和。

perspective 屬性還有一些相關的概念：

perspective-origin: 定義3D空間的消失點。預設值是元素的中心。
transform-style: preserve-3d: 應用於父元素，使子元素保留3D空間。
backface-visibility: 控制當元素背面朝向觀察者時是否可見。

可以玩玩看

可做出的效果範例： https://www.youtube.com/watch?v=SBNWJB4lJqo

CSS介紹Transform 3D效果 ​

可以來玩玩看 ​

進階功能(perspective透視) ​

CSS介紹Transform 3D效果

可以來玩玩看

進階功能(perspective透視)