旋转的立方体 css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background: black;
            perspective:600px;
        }
        #container {
            margin: 100px auto ;
            width: 200px;
            height: 200px;
            position: relative;
            -webkit-transform-style: preserve-3d;/*<!--子元素也可以实现动画的语句-->*/
            /*-webkit-transform: rotateY(50deg);*/
            -webkit-animation: run 4s linear infinite ;
        }
        @keyframes run {/*<!--和animation配合使用  -->*/
            /*0%{*/
            /*}*/
            100%{
                -webkit-transform: rotateY(360deg);
            }
        }

        #container div {
            width: 200px;
            height: 200px;
            background: gainsboro;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            border-radius: 10px;
            opacity: 0.5;
        }

        #div1 {
            -webkit-transform: rotateX(90deg) translateZ(100px);
            /*<!-- z轴也随着元素旋转  始终垂直元素 -->*/
        }

        #div2 {
            -webkit-transform: translateZ(100px);
            z-index: 1;
        }

        #div3 {
            -webkit-transform: rotateY(90deg) translateZ(100px);
        }

        #div4 {
            -webkit-transform: rotateY(180deg) translateZ(100px);
        }

        #div5 {
            -webkit-transform: rotateY(-90deg) translateZ(100px);
        }

        #div6 {
            -webkit-transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>

<div id="container">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>
</body>
</html>
旋转的立方体 css3

猜你喜欢
