前端作业（11）

最新推荐文章于 2024-10-04 00:46:18 发布

咋的啥名都用不了呢~

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量85

点赞数

本文链接：https://blog.csdn.net/weixin_63492023/article/details/126176535

版权

3D的案例（包括：transform-style、两面翻转案例、3D导航栏案例、旋转木马案例）

style：

<style>
        /* transform-style */
        body {
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子盒子保持3D立体空间 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
        /* 两面翻转案例 */
        .box1 {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .6s;
            /* 让蓝保持立体 */
            transform-style: preserve-3d;
        }
        .box1:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 60px;
            color: #000;
            text-align: center;
            line-height: 300px;
        }
        .front {
            background-color: red;
            z-index: 1;
        }
        .back {
            background-color: lightblue;
            /* 背靠背 旋转180度 */
            transform: rotateY(180deg);
        }
        /* 3D导航栏案例 */
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;
        }
        ul li {
            float: left;
            margin-left: 10px;
            width: 120px;
            height: 35px;
            list-style: none;
            perspective: 500px;
            font-size: 20px;
            text-align: center;
            line-height: 35px;
        }
        .box2 {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        .box2:hover {
            transform: rotateX(90deg);
        }
        .fro,
        .botton {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .fro {
            background-color: red;
            z-index: 1;
            transform: translateZ(17.5px);
        }
        .botton {
            background-color: lightblue;
            transform: translateY(17.5px) rotateX(-90deg);
        }
        /* 旋转木马案例 */
        body {
            perspective: 1000px;
        }
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 800px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
            background: url(logo.png) no-repeat;
        }
        section:hover {
            animation-play-state: paused;
        }
        @keyframes rotate {
            0% {
                transform: rotateX(-15deg) rotateY(0);
            }
            100% {
                transform: rotateX(-15deg) rotateY(360deg);
            }
        }
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(logo.png) no-repeat;
        }
        section div:nth-child(1) {
            /* 先旋转 后移动 */
            transform: rotateY(0) translateZ(300px);
        }
        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>

body:

<body>
    <!-- transform-style -->
    <div>
        <div class="box">
            <div></div>
            <div></div>
        </div>
    </div>
    <!-- 两面翻转案例 -->
    <div class="box1">
        <div class="front">魏婴</div>
        <div class="back">蓝湛</div>
    </div>
    <!-- 3D导航栏案例 -->
    <ul>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
        <li>
            <div class="box2">
                <div class="fro">魏无羡</div>
                <div class="botton">蓝忘机</div>
            </div>
        </li>
    </ul>
    <!-- 旋转木马案例 -->
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>