超级酷的正方体

-------------------------代码部分-------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        body{
            background: black;
        }
        ul{
            list-style: none;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            -webkit-transform-style: preserve-3d;/*兼容谷歌浏览器和safari浏览器*/
        }
        li{
            width: 200px;
            height: 200px;
            position: absolute;
            text-align: center;
            line-height: 200px;
            font-size: 80px;
            font-weight: bold;
            color: white;
        }
        li:nth-child(1){/*第1个li:上面*/
            background: rgba(128,128,128,0.98);
            -webkit-transform: rotateX(90deg) translateZ(100px);
        }
        li:nth-child(2){/*第2个li:下面*/
            background: rgba(0,0,255,0.98);
            -webkit-transform: rotateX(360deg) translateZ(-100px);
        }
        li:nth-child(3){/*第3个li:右面*/
            background: rgba(255,0,255,0.98);
            -webkit-transform: rotateY(-90deg) translateZ(100px);
        }
        li:nth-child(4){/*第4个li:左面*/
            background: rgba(0,255,255,0.98);
            -webkit-transform: rotateY(90deg) translateZ(100px);
        }
        li:nth-child(5){/*第5个li:后面*/
            background: rgba(255,0,0,0.98);
            -webkit-transform: rotateX(360deg) translateZ(100px);
        }
        li:nth-child(6){/*第6个li:正面*/
            background: rgba(0,139,139,0.98);
            -webkit-transform: rotateX(270deg) translateZ(100px);
        }
        /**/
        ul{
            -webkit-animation: myanima 5s linear infinite;
        }
        @-webkit-keyframes myanima{
            0%{
                -webkit-transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }
        }
        #bottom{
            position: absolute;
            width: 200px;
            height: 200px;
            bottom: 20px;
            margin: 0 auto;
            display: block;
            left: 48%;
        }
        #bottom input{
            display: block;
            position: absolute;
        }
        #bottom input:nth-child(1){
            left: 100px;
        }
        #bottom input:nth-child(2){
            left: -100px;
        }
        #bottom input:nth-child(3){
            top: -100px;
        }
        #bottom input:nth-child(4){
            top: 100px;
        }


    </style>
    <style type="text/css" id="changes">
        /*存放修改*/
    </style>
    <script type="text/javascript">
        function change(num1,num2,num3,num4){
        var stylec=document.getElementById("changes");
            

            //执行
        stylec.innerHTML="@-webkit-keyframes myanima{0%{-webkit-transform: rotateX("+num1+"deg) rotateY("+num2+"deg);}100%{-webkit-transform: rotateX("+num3+"deg) rotateY("+num4+"deg);}}";
        }
    </script>
    <body>
        <ul id="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div id="bottom">
            <input type="button"  value="→" onclick="change(0,0,0,360)"/>
            <input type="button"  value="←" onclick="change(0,360,0,0)"/>
            <input type="button"  value="↑" onclick="change(0,0,360,0)"/>
            <input type="button"  value="↓" onclick="change(360,0,0,0)"/>
            <input type="button"  value="重设" onclick="change(0,0,360,360)"/>
        </div>
    </body>
</html>

 

posted @ 2016-01-12 10:17  时光之梦  阅读(188)  评论(0)  编辑  收藏  举报