HTML+CSS实现3D旋转正方体

最新推荐文章于 2024-07-06 13:17:42 发布

꧁֟幻֟༿༒༾֟灵֟꧂

最新推荐文章于 2024-07-06 13:17:42 发布

阅读量890

点赞数

分类专栏：笔记学习文章标签： css html 3d

本文链接：https://blog.csdn.net/qq_42552613/article/details/128338186

版权

学习同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

HTML+CSS实现3D旋转正方体

// An highlighted block
<!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>
        div {
            width: 150px;
            height: 150px;
        }

        .main {
            animation: box 3s linear infinite alternate;
            transition-timing-function: ease-in-out;
            top: 300px;
            width: 150px;
            margin: 0 auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
        }

        @keyframes box {
            0% {
                transform: rotateY(45deg) rotateZ(0deg) rotateY(45deg);
            }

            50% {
                transform: rotateY(90deg) rotateZ(45deg) rotateY(90deg);

            }

            100% {
                box-shadow: 5px 5px 5px #b3de33;
                transform: rotateY(135deg) rotateZ(90deg) rotateY(135deg);
            }
        }

        .mainbox {
            transform-style: preserve-3d;
            margin: -100px auto;
            transform: translateY(200px);
            animation: top 3s linear forwards;
        }

        @keyframes top {
            0% {
                transform: translateY(200px);
            }

            50% {
                transform: translateY(150px);
            }

            75% {
                transform: translateY(100px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .mainbox:hover {
            transform: translateY(200px);
            animation: X 3s linear;
        }

        @keyframes X {
            0% {
                transform: translateY(0px);
            }

            25% {
                transform: translateY(50px);
            }

            50% {
                transform: translateY(100px);
            }

            75% {
                transform: translateY(150px);
            }

            100% {
                transform: translateY(200px);
            }
        }

        span {
            margin-left: 50%;
            text-align: center;
            line-height: 150px;
            font-size: 30px;
            font-weight: bolder;
            color: darkmagenta;
        }
        .box1 {
            opacity: 0.5;
            transform: rotateX(90deg) translateZ(-75px);
            position: absolute;
            background-color: aqua;
        }
        .box2 {
            opacity: 0.5;
            transform: rotateX(90deg) translateZ(75px);
            position: absolute;
            background-color: fuchsia;
        }
        .box3 {
            opacity: 0.5;
            transform: rotateY(90deg) translateZ(-75px);
            position: absolute;
            background-color: gold;
        }
        .box4 {
            opacity: 0.5;
            transform: rotateY(90deg) translateZ(75px);
            position: absolute;
            background-color: red;
        }
        .box5 {
            opacity: 0.5;
            transform: translateZ(75px);
            position: absolute;
            background-color: cornflowerblue;
        }
        .box6 {
            opacity: 0.5;
            transform: translateZ(-75px);
            position: absolute;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="mainbox">
        <div class="main">
            <div class="box1">
                <span>1</span>
            </div>
            <div class="box2">
                <span>2</span>
            </div>
            <div class="box3">
                <span>3</span>
            </div>
            <div class="box4">
                <span>4</span>
            </div>
            <div class="box5">
                <span>5</span>
            </div>
            <div class="box6">
                <span>6</span>
            </div>
        </div>
    </div>

</body>

</html>