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 轴向上或向下平移元素。
打印页面
上一页
下一页
广告