CSS3 3D魔方

最新推荐文章于 2022-12-10 23:55:41 发布

Remainder_years

最新推荐文章于 2022-12-10 23:55:41 发布

阅读量1.4k

点赞数 1

分类专栏： CSS3 文章标签： css3 3d

本文链接：https://blog.csdn.net/qq_33808550/article/details/59490452

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D魔方</title>
    <style>
        /*上*/
        @keyframes spintop {
            0% {transform:rotateX(90deg) rotateZ(0deg) translateZ(100px);}
            50% { transform:rotateX(1170deg) rotateZ(0deg)  translateZ(100px); }
            100% {transform:rotateX(1170deg) rotateZ(-1080deg) translateZ(100px);}
        }
        /*左*/
        @keyframes spinleft {
            0% {transform:rotateY(-90deg) rotateZ(0deg)  translateZ(100px);}
            50% { transform:rotateY(-90deg) rotateZ(-1080deg)  translateZ(100px); }
            100% { transform:rotateY(990deg) rotateZ(-1080deg) translateZ(100px); }
        }
        /*前*/
        @keyframes spinbefore {
            0% {transform: rotateX(0deg) rotateY(0deg) translateZ(100px);}
            50% { transform:rotateX(1080deg) rotateY(0deg) translateZ(100px); }
            100% { transform:rotateX(1080deg) rotateY(1080deg) translateZ(100px); }
        }
        /*右*/
        @keyframes spinright {
            0% {transform:rotateY(90deg) rotateZ(0deg) translateZ(100px);}
            50% { transform:rotateY(90deg) rotateZ(1080deg) translateZ(100px); }
            100% { transform:rotateY(1170deg) rotateZ(1080deg) translateZ(100px); }
        }
        /*后*/
        @keyframes spinafter {
            0% {transform:rotateX(180deg) rotateY(0deg) translateZ(100px);}
            50% {transform:rotateX(1260deg) rotateY(0deg) translateZ(100px); }
            100% {transform:rotateX(1260deg) rotateY(-1080deg)  translateZ(100px); }
        }
        /*下*/
        @keyframes spinbottom {
            0% {transform:rotateX(-90deg) rotateZ(0deg)  translateZ(100px);}
            50% { transform:rotateX(990deg) rotateZ(0deg) translateZ(100px); }
            100% { transform:rotateX(990deg) rotateZ(1080deg) translateZ(100px); }
        }
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .square{
            transform-style: preserve-3d;
            perspective: 1000px;
            position: relative;
            height:100px;
            width:100px;
            left:33%;
            top:50%;
        }
        .side{
            position:absolute;
            display:block;
            height:100px;
            width:100px;
        }
        /*上*/
        .side_top{
            background:#FF884D;
            transform:rotateX(90deg) translateZ(100px);
            animation: spintop linear infinite 12s;
        }
        /*左*/
        .side_left{
            background:#65A2C5;
            transform:rotateY(-90deg) translateZ(100px);
            animation: spinleft linear infinite 12s;
        }
        /*前*/
        .side_before{
            background:#41C3AC;
            transform:translateZ(100px);
            animation: spinbefore linear infinite 12s;
        }
        /*右*/
        .side_right{
            background:#FFCC5C;
            transform:rotateY(90deg) translateZ(100px);
            animation: spinright linear infinite 12s;
        }
        /*后*/
        .side_after{
            background:#FF6B57;
            transform:rotateY(180deg) translateZ(100px);
            animation: spinafter linear infinite 12s;
        }
        /*下*/
        .side_bottom{
            background:#32526E;
            transform:rotateX(-90deg) translateZ(100px);
            animation: spinbottom linear infinite 12s;
        }
    </style>
</head>
<body>
   <div class="square">
       <div class="side side_top"></div>
       <div class="side side_left"></div>
       <div class="side side_before"></div>
       <div class="side side_right"></div>
       <div class="side side_after"></div>
       <div class="side side_bottom"></div>
   </div>
</body>
</html>