3D转换 —— 两面翻转盒子和3d导航栏

最新推荐文章于 2022-08-03 22:06:31 发布

Kong_十六

最新推荐文章于 2022-08-03 22:06:31 发布

阅读量949

点赞数

分类专栏： # H5+C3 # 练习实例文章标签：转换 3d转换

本文链接：https://blog.csdn.net/qq_42383764/article/details/105037322

版权

练习实例同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

H5+C3

10 篇文章 0 订阅

订阅专栏

3d转换和2d转换的最大区别就是，2d是二维坐标系，是平面的，而3d是三维坐标系，具有空间感、立体感。在3d转换中，有两个特别重要的属性perspective、transform - style。

perspective：透视，也叫视距，就是人眼距离屏幕的距离。距离屏幕越近(透视越小)物体越大，距离屏幕越远(透视越大)物体越小。

1. 透视是写在父级元素上的

2. 透视单位：px

transform-style：3d呈现。该属性是控制子元素是否开启3d效果。默认是不开启的，当属形值为：preserve-3d，则开启3d效果。

3d呈现写在父级元素上，是控制子元素是否保留3d效果。

两面翻转的盒子

前后两个盒子，hover时翻转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前后翻转导航栏</title>
    <style>
        body {
            /* 为了有近大远小的效果 给父级元素添加透视 */
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            /* 添加过渡效果 */
            transition: all 1s;
            /* 让子元素保持3d呈现 */
            transform-style: preserve-3d;
        }

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

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
            color: #fff;
            border-radius: 50%;
        }

        .front {
            background-color: pink;
            z-index: 2;
        }

        .back {
            background-color: purple;
            /* 先旋转过来 否则当盒子转过来时 文字是反的 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <!-- 旋转box盒子时   后面的盒子显示天天向上 -->
    <div class="box">
        <div class="front">好好学习</div>
        <div class="back">天天向上</div>
    </div>
</body>

</html>

上下翻转的3d导航栏

主要就是3d转换的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下翻转</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            margin: 100px;
        }

        ul li {
            float: left;
            margin: 10px;
            width: 150px;
            height: 40px;
            /* 因为旋转的是li中的box盒子 box盒子也要有立体感 所以给li添加透视 */
            perspective: 400px;
        }


        .box {
            position: relative;
            width: 100%;
            height: 100%;
            /* 保持子元素的3d效果 */
            transform-style: preserve-3d;
            transition: all .5s;
        }

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

        .top,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }

        .top {
            background-color: pink;
            /* 让前面的盒子 向前移动  */
            /* 立方体的中心点 是旋转的中心点 */
            transform: translateZ(20px);
        }

        .bottom {
            background-color: purple;
            /* 下面的盒子 要趴倒 还要向下移动  但是 有位移的时候 一定要把位移写在最前面*/
            transform: translateY(20px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="top">好好学习</div>
                <div class="bottom">天天向上</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="top">好好学习</div>
                <div class="bottom">天天向上</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="top">好好学习</div>
                <div class="bottom">天天向上</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="top">好好学习</div>
                <div class="bottom">天天向上</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="top">好好学习</div>
                <div class="bottom">天天向上</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="top">好好学习</div>
                <div class="bottom">天天向上</div>
            </div>
        </li>
    </ul>
</body>

</html>