CSS - 3D 變換

上一頁
下一頁

CSS 變換用於透過使用 translate、scale 和 rotate 等屬性在三維空間中為元素設定動畫。換句話說，這些函式允許您沿 X、Y 和 Z 軸旋轉、縮放和移動元素，為您的設計新增深度和透視感。

2D 變換
3D 變換

目錄


 

CSS 3D 平移

CSS 中的 **translate3d** 函式透過指定沿 X、Y 和 Z 軸的偏移量來在 3D 空間中移動元素，其中 Z 軸控制深度（朝向或遠離觀察者的距離）。以下示例顯示了一個在懸停時在 3D 空間中移動的盒子。**perspective** 屬性用於為 3D 效果提供深度感。

示例

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* Container with Perspective */
        .container {
            perspective: 800px; 
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 3D Transformation */
            transform: translate3d(50px, 50px, 100px) 
                        rotateX(15deg) rotateY(25deg);
            transition: transform 0.6s ease;

        }

        /* Hover State with Different 3D Transformation */
        .box:hover {
            transform: translate3d(-50px, -50px, -100px);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            3D Box
        </div>
    </div>
</body>

</html>

CSS 3D 旋轉

CSS 中的 **rotate3d** 函式允許您透過定義旋轉向量的 X、Y 和 Z 分量以及旋轉角度，在 3D 空間中圍繞指定軸旋轉元素。以下示例顯示了一個在懸停時在 3D 空間中旋轉的盒子，創造了動態的視覺效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* Container with Perspective */
        .container {
            perspective: 800px; 
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 3D Rotation */
            transform: rotate3d(1, 1, 1, 45deg);
            transition: transform 0.6s ease;

        }

        /* Hover State with Different 3D Rotation */
        .box:hover {
            transform: rotate3d(1, 1, 0, -45deg);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            3D Box
        </div>
    </div>
</body>

</html>

CSS 3D 縮放

CSS 中的 **scale3d** 函式透過指定沿 X、Y 和 Z 軸的縮放因子來在 3D 空間中縮放元素，允許進行統一或非統一縮放。以下示例顯示了一個在懸停時在 3D 空間中縮放的盒子，創造了視覺上吸引人的縮放效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* Container with Perspective */
        .container {
            perspective: 800px; 
        }

        /* The Box Element */
        .box {
            width: 150px;
            height: 150px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 3D Scaling */
            transform: scale3d(1, 1, 1) rotate3d(1, 1, 0, -45deg);
            transition: transform 0.6s ease;

        }

        /* Hover State with Different 3D Scaling */
        .box:hover {
            transform:  scale3d(1.5, 1.5, 0.5);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            3D Box
        </div>
    </div>
</body>

</html>

下表列出了用於在三維空間中變換元素的各種屬性。

屬性 描述 示例
backface-visibility 將元素背面的可見性設定為對使用者可見。
perspective 確定 z=0 平面與使用者之間的距離。
perspective-origin 確定使用者觀察 3D 定位元素的位置。
rotate3d 在三維空間中旋轉元素。
scale 在三維空間中縮放元素。
transform 在三維空間中變換元素。
translate 在三維空間中平移元素。
rotateZ() 圍繞 z 軸旋轉元素。
scaleZ() 沿 z 軸向上或向下縮放元素。
translateZ() 沿 z 軸向上或向下平移元素。
列印頁面
上一頁
下一頁
廣告