旋转css三维对象;工作不正常

首先，看看这个jsfiddle：http://jsfiddle.net/markasoftware/CJDeD/6/

         <div id="container">
            <figure id="box">
                <div id="back" class="side"></div>
                <div id="left" class="side"></div>
                <div id="right" class="side"></div>
                <div id="front" class="side"></div>
                <div id="bottom" class="side"></div>
            </figure>
        </div>

        body{
            background-color: #000000;
        }
        #msgline{
            opacity: 0;
            transition: opacity 0.5s 1s;
            -webkit-transition: opacity 0.5s 1s;
        }
        h1{
            margin-top: 0;
        }
        .side{
            position: absolute;
            background-color: #c8c8c8;
            color: darkgrey;
            border-color: #000000;
            border-radius: 20px;
            border-width: thin;
            border-style: solid;
            text-align: center;
        }
        #box{
            height: 100%;
            width: 100%;
            position: absolute;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(-20deg);
            transform-style: preserve-3d;
            transform: rotateX(-20deg);
            transition: all 1s;
            -webkit-transition: all 1s;
        }
        #container{
            margin-top: 30px;
            margin-left: 20%;
            -webkit-perspective: 800px;
            perspective: 800px;
            height: 200px;
            width: 400px;
        }
        #bottom{
            height: 200px;
            width: 400px;
            -webkit-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px);
        }
        #front{
            height: 200px;
            width: 400px;
            -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
        }
        #back{
            height: 200px;
            width: 400px;
            -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
        }
        #left{
            height: 200px;
            width: 200px;
            -webkit-transform: rotateY(-90deg) translateZ(100px);
            transform: rotateY(-90deg) translateZ(100px);
        }
        #right{
            height: 200px;
            width: 200px;
            -webkit-transform: rotateY(90deg) translateZ(300px);
            transform: rotateY(90deg) translateZ(300px);
        }

        function spinit(){
                var box=document.getElementById('box');
                box.style.transform=box.style.webkitTransform='rotateX(-20deg) rotateY(360deg)';
            }
        setTimeout(spinit(),1000)

它意味着有一个三维矩形棱镜与一个开放的顶部。确实如此。我还希望它能360度旋转。我包含了一个小的js函数来实现这一点，但它不起作用。它适用于任何其他值，但不适用于360！我认为它试图通过将360转换为0来简化它，因为它对大多数事情都是一样的，但对动画来说却不是。以前也有另一个问题，但我发现了，并在下面给出了答案。动画使用其他值（例如，尝试将360更改为180），但不使用360。我想试试359，但它只是朝着相反的方向旋转了1度。