0

首先，看看这个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)

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

4

1 回答 1

0

好吧，我讨厌回答自己的问题，但我发现了为什么轮换的起源搞砸了。box 元素应该应用了以下 css 属性：

height: 100%;
width: 100%;

新的jsfiddle在http://jsfiddle.net/markasoftware/CJDeD/6/但是360度旋转的问题依然存在，请回答

于 2013-02-25T05:19:29.993 回答