CSS3动画 3DBOX

最新推荐文章于 2021-12-21 11:00:00 发布

原创最新推荐文章于 2021-12-21 11:00:00 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

4 篇文章

订阅专栏

先看个效果图

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>旋转盒子</title>
    <meta charset="utf-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        @keyframes box {
            100% {
                transform: rotate3d(100,100,100,360deg);
            }
        }
        #box {
            position: absolute;
            top: 30%;
            left: 50%;
            /*position:relative;*/
            perspective: 2000px;
            perspective-origin: 500px -300px;
            animation: box 5s linear 7s infinite both;
            transform-style: preserve-3d;
        }
        .item {
            position: absolute;
            border: 1px solid #000000;
            opacity: 0.5;
            width: 200px;
            height: 200px;
            font-size: 100px;
            background-color: #7b8efb;
            text-align: center;
            line-height: 200px;
        }
        @keyframes box1 {
            100% {
                transform: rotateY(-90deg);
            }
        }
        #box1 {
            z-index: 6;
            transform-origin: left;
            animation: box1 1s linear 1s both;
        }
        @keyframes box2 {
            100% {
                transform: rotateY(90deg);
            }
        }
        #box2 {
            z-index: 5;
            transform-origin: right;
            animation: box2 1s linear 2s both;
        }
        @keyframes box3 {
            100% {
                transform: rotateX(90deg);
            }
        }
        #box3 {
            z-index: 4;
            transform-origin: top;
            animation: box3 1s linear 3s both;
        }
        @keyframes box4 {
            100% {
                transform: rotateX(-90deg);
            }
        }
        #box4 {
            z-index: 3;
            transform-origin: bottom;
            animation: box4 1s linear 4s both;
        }
        @keyframes box5 {
            100% {
                transform: translateZ(200px);
            }
        }
        #box5 {
            z-index: 2;
            animation: box5 1s linear 5s both;
        }
        @keyframes box6 {
            100% {
                transform: rotateY(180deg);
            }
        }
        #box6 {
            animation: box6 1s linear 6s both;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item" id="box1">1</div>
        <div class="item" id="box2">2</div>
        <div class="item" id="box3">3</div>
        <div class="item" id="box4">4</div>
        <div class="item" id="box5">5</div>
        <div class="item" id="box6">6</div>
    </div>
</body>
</html>