Question

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

Answer 1

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

height: 100%;
width: 100%;

新的jsfiddle位于http://jsfiddle.net/markasoftware/CJDeD/6/但是，关于360度旋转的问题仍然存在，所以请回答

旋转css 3d对象无法正常工作

1 个答案: