CSS 实现旋转的正方体

pomiss

首先声明 : 火狐不兼容

下面直接放代码:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <title>正方体</title>
    <style>
                #square{
                        width:200px;
                        height:200px;
                        margin:50px auto;
                        -webkit-perspective:800;
                        -webkit-perspective-orign:50% 50%;
                }
                #con{
                        -webkit-transform-style:preserve-3d;   
                        -webkit-animation:z 5s linear infinite;
                        -webkit-transform-origin:50%;
                        position: relative;
                }
                .box{
                        opacity:.75;
                        position: absolute;
                        width:200px;
                        height:200px;
                        color:white;
                        font-size:200px;
                        line-height:200px;
                        text-align:center;
                        border-radius:10px;
                }
                #box1{
                        background-color: black;
                        -webkit-transform:rotateX(90deg) translateZ(100px);
                }
                #box2{
                        background-color: green;
                        -webkit-transform:rotateY(90deg) translateZ(100px);
                }
                #box3{
                        background-color: gold;
                        -webkit-transform:translateZ(100px);
                }
                #box4{
                        background-color: blue;
                        -webkit-transform:rotateY(270deg) translateZ(100px);
                }
                #box5{
                        background-color: red;
                        -webkit-transform:translateZ(-100px);
                }
                #box6{
                        background-color: pink;
                        -webkit-transform:rotateX(270deg) translateZ(100px);
                }
                @-webkit-keyframes z{
                        0%{-webkit-transform:rotateY(0deg);}
                        100%{-webkit-transform:rotateY(360deg);}
                }
    </style>
</head>
<body>
    <div id="square">
        <div id="con">
            <a class="box" id="box1">1</a>
            <a class="box" id="box2">2</a>
            <a class="box" id="box3">3</a>
            <a class="box" id="box4">4</a>
            <a class="box" id="box5">5</a>
            <a class="box" id="box6">6</a>
        </div>
    </div>
</body>
</html>

ouzo

火狐现在兼容性越来越跑偏了
都不知道想干嘛... 还经常崩溃, 看了下几个浏览器的内存占用又超级高, 不过奇怪的是, 其他浏览器都是多进程的, 火狐是单进程的.