3D动画盒子旋转

最新推荐文章于 2021-09-07 15:59:09 发布

BUGes

最新推荐文章于 2021-09-07 15:59:09 发布

阅读量238

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/gooutworkhard/article/details/113766699

版权

3D动画盒子旋转

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

<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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: aquamarine;
            perspective: 1000px;
        }

        .box {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 200px auto;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transform: rotateX(20deg) rotateY(20deg);
            animation: one 5s linear infinite;
            -webkit-animation: one 5s linear infinite;
        }

        @keyframes one {

            /* 动画显示流畅 */
            from {
                transform: rotateX(-20deg) rotateY(0deg);
            }

            to {
                transform: rotateX(340deg) rotateY(360deg);
            }

            /* 略有卡顿 */
            /* 0% {
                transform: rotateX(-20deg) rotateY(0deg);
            }

            25% {
                transform: rotateX(170deg) rotateY(90deg);
            }

            50% {
                transform: rotateX(220deg) rotateY(180deg);
            }

            75% {
                transform: rotateX(270deg) rotateY(240deg);
            }

            100% {
                transform: rotateX(340deg) rotateY(360deg);
            } */


        }


        .box div {
            width: 200px;
            height: 200px;
            background-color: #000;
            opacity: .3;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid white;
            transition: all 2s;
        }

        .box div:nth-child(1) {
            transform: translateZ(100px);
        }

        .box div:nth-child(2) {
            transform: translateZ(-100px);
        }

        .box div:nth-child(3) {
            transform: rotateX(90deg) translateZ(100px);
        }

        .box div:nth-child(4) {
            transform: rotateX(90deg) translateZ(-100px);
        }

        .box div:nth-child(5) {
            transform: rotateY(90deg) translateZ(100px);
        }

        .box div:nth-child(6) {
            transform: rotateY(90deg) translateZ(-100px);
        }

        /* 鼠标移上去触发 */
        .box:hover div:nth-child(1) {
            transform: translateZ(200px);
        }

        .box:hover div:nth-child(2) {
            transform: translateZ(-200px);
        }

        .box:hover div:nth-child(3) {
            transform: rotateX(90deg) translateZ(200px);
        }

        .box:hover div:nth-child(4) {
            transform: rotateX(90deg) translateZ(-200px);
        }

        .box:hover div:nth-child(5) {
            transform: rotateY(90deg) translateZ(200px);
        }

        .box:hover div:nth-child(6) {
            transform: rotateY(90deg) translateZ(-200px);
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 前后，上下，右左 -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<!--
animation--关键帧动画，
translate(x,y)--位移
transform-style--flat(2D)/preserve-3D(3D)
perspective--视距
transition 过度属性名称，花费时间，速度，开始时间
                                   速度（linear(匀速)/ease(慢-快-慢)）
-->
</html>

BUGes

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
3D动画盒子旋转

3D动画盒子旋转<!DOCTYPE html><html lang="en"><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"> <ti
复制链接

扫一扫