CSS：3D效果（位移、旋转）

最新推荐文章于 2025-04-14 18:20:59 发布

李建雨

最新推荐文章于 2025-04-14 18:20:59 发布

阅读量1.8k

点赞数

文章标签： css 3d css3

本文链接：https://blog.youkuaiyun.com/m0_55944058/article/details/121256360

版权

浏览器平面为二维平面，以浏览器可视区域左上角为原点，X轴为左上到右上，正方向为右；Y轴为左上到左下，正方向为下。

要想实现3D效果，我们需要引入Z轴，这条Z轴垂直于屏幕，以出平面为正方向。

transform产生的位移和旋转都不脱标！！！

1、3D位移

3D位移函数与2D位移一样，需要使用transfrom变量，变量值有如下几个：

1、transform:translateX(位移量)
2、transform:translateY(位移量)
3、transform:translateZ(位移量)
4、transform:translate3d(X位移量，Y位移量，Z位移量)

当我们对盒子设置transform:translateZ(位移量)时，我们发现浏览器中盒子并未产生变换，这是由于未对父元素设置视距perspective，导致我们无法直观感受到Z轴导致的。

当我们对盒子的父元素添加perspective：800px后便可直观感受到Z轴移动了；perspective视距函数是指用户的眼睛到浏览器平面的距离，根据经验，这个数值一般取800px到1200px之间。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D移动</title>
    <style>
        body {

            /* 使用transform:translate3d必须使用设置视距,否则z轴移动无法直观观测 */
            /* perspective视距值一般取800-1200px */
            /* 此函数给父级元素加 */
            perspective: 800px;
        }
        div {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            background-color: orange;
        }

        div:hover  {
            /* translate3d(x轴,y轴,z轴) */
            transform: translate3d(0,0,200px);

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2、3D旋转

3D旋转的变量值有如下几个：

1、transform:rotateX(旋转量)
2、transform:rotateY(旋转量)
3、transform:rotateZ(旋转量)
4、transform:rotate3d(X旋转量，Y旋转量，Z旋转量)

旋转正方向为X>Y；Y>Z；Z>X

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 800px;
        }

        img {
            display: block;
            width: 400px;
            margin: 40px auto;
            transition: all 1s;
        }

        img:nth-child(1):hover {
            transform: rotateX(60deg);
        }

        img:nth-child(2):hover {
            transform: rotateY(60deg);
        }

        img:nth-child(3):hover {
            transform: rotateZ(60deg);
        }
    </style>
</head>

<body>
    <img src="./images/hero.jpeg" alt="">
    <img src="./images/hero.jpeg" alt="">
    <img src="./images/hero.jpeg" alt="">

</body>

</html>