H5 + C3基础（八）（3d转换位移 & 旋转）

01空间

已于 2023-08-30 14:31:50 修改

阅读量944

点赞数

分类专栏：前端文章标签： 3d css css3

于 2023-08-29 15:33:12 首次发布

本文链接：https://blog.csdn.net/tergou/article/details/132550980

版权

前端专栏收录该内容

22 篇文章 3 订阅

订阅专栏

3d转换位移 & 旋转

定义

3d转换在2d转换中增加了一个z轴，垂直于屏幕，向外为正，向内为负。

位移

在2d位移的基础上增加了

translateZ(z);
在Z轴上的位移
translate3d(x,y,z);
同时定义在3个轴上的位移

透视 perspective

3D效果通过透视距离（视距）和z轴模拟人眼到盒子的距离

视距越大，隔得越远，物体越小；视距越大，隔得越近，物体越大；
Z轴越大，隔得越近，物体越大，Z轴越小，隔得越远，物体越小。

透视距离需加载模拟3d的元素的父盒子上，通过父盒子的视角去模拟3d近大远小的效果。

透视距离需 >= z轴的值，否则相当于物体跑进我们眼睛里面了。

透视和z轴都可以调整最终观察到的物体大小

透视和Z轴使用场景

透视（视距）：用于设置眼睛到屏幕的距离，用于在父盒子上设置统一的视距。

Z轴：用于给盒子内不同元素，单独设置盒子距离屏幕的Z轴的值，并体现出不同的大小。

旋转

和位移一样，3d旋转在2d旋转的基础之上，加了z轴的旋转。
同样要借助基于父盒子的视距模拟3d效果。
对于旋转的的方向：站在坐标轴正方向，顺势针方向即为正向旋转，逆时针即为负向旋转。

新增两个旋转属性

rotateZ(deg)；沿着z轴旋转指定度数
rotate3d(x, y, z, deg)；沿着自定义轴线旋转

子元素开启3d视图

transform-style：flat（默认，不开启）| preserve-3d 开启3d视图

同样这个属性是给到父盒子的。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子盒子保持3d视图</title>
        <style>
            .box {
                position: relative;
                width: 500px;
                height: 200px;
                background-color: #ff6700;
                margin: 100px auto;
                perspective: 500px;
                transform-style: preserve-3d;
            }

            .box:hover {
                transform: rotateY(70deg);
            }

            .box div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #ee20ee;
            }

            .box div:last-child {
                background-color: green;
                transform: rotateX(45deg);
            }


            body {
                perspective: 500px;
            }
        </style>

    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
        </div>
    </body>
</html>

示例

盒子前后面反转

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>前后翻转盒子</title>
        <style>
            .box {
                position: relative;
                width: 300px;
                height: 300px;
                margin: 100px auto;
                transition: all .2s;

                perspective: 300px;
                transform-style: preserve-3d;

            }

            .box:hover {
                transform: rotateY(180deg);
            }

            .box > * {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 150px;
                font-size: 20px;
                text-align: center;
                line-height: 300px;
                backface-visibility: hidden;
            }

            .box .front {
                background-color: #ee20ee;
                z-index: 1;
            }

            .box .back {
                background-color: #ff5000;
                transform: rotateY(180deg);
            }
            body{
                perspective: 300px;
                transform-style: preserve-3d;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="front">今天要上学</div>
            <div class="back">作业没写完</div>
        </div>
    </body>
</html>

3d菜单

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>3d菜单</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                margin: 100px auto;
                width: 200px;
                height: 100px;
            }

            ul li {
                float: left;
                margin: 0 5px;
                width: 100%;
                height: 100%;
                list-style: none;
                perspective: 500px;
            }
            div {
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 100px;
            }

            .box {
                position: relative;
                transition: all 0.6s;
                transform-style: preserve-3d;
                background-color: #ff5000;
            }

            .front {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: green;
                transform: translateZ(50px)
            }

            .bottom {
                position: absolute;
                top: 0;
                left: 0;
                transform: translateY(50px) rotateX(-90deg); /*translateZ(100px)*/
                background-color: #ee20ee;
            }

            .box:hover {
                transform: rotateX(90deg);
            }

            body {
                perspective: 500px;
                transform-style: preserve-3d;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <div class="box">
                    <div class="front">正面</div>
                    <div class="bottom">底面</div>
                </div>
            </li>
        </ul>
    </body>
</html>

围绕y轴旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>围绕一个y轴旋转</title>

    <style>
        body {
            perspective: 1000px;
        }
        
        .box {
            position: relative;
            margin: 200px auto;
            width: 200px;
            height: 200px;
            text-align: center;
            transform-style: preserve-3d;
            animation: three_rotate 10s infinite linear;
        }

        .box:hover {
            animation-play-state: paused;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

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

        .box img:nth-child(1) {
            transform: translateZ(300px);
        }

        .box img:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }

        .box img:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }

        .box img:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }

        .box img:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }

        .box img:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }


    </style>
</head>
<body>
<!--动态转动都是围绕 .box 这个盒子的，里面的图片都是事先摆在相应的位置，相当于是附属在这个盒子上随着.box盒子的转动而转动-->
<div class="box">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
</div>
</body>
</html>

小结

3d变换注意两个属性：

perspective: 300px;
开启3d视图，这个值必须比Z轴的值大，且设置在要表现3d效果的盒子的父盒子上
作用：让其子元素的3d属性呈现出立体的效果，有近大远小的视觉
transform-style: preserve-3d;
保留子盒子3d效果，默认当父盒子开启3d视图，并且发生3d转换时，子盒子会变成2d，需要给父盒子加上此属性
作用：使当前盒子开启在开启3d属性后，其子元素依然保留已开启的3d效果