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 では機能しません。

4

1 に答える 1

0

わかりました、私は自分自身の質問に答えるのが嫌いですが、回転の原点が台無しになった理由を見つけました. ボックス要素には、次の css プロパティが適用されている必要があります。

height: 100%;
width: 100%;

新しい jsfiddle はhttp://jsfiddle.net/markasoftware/CJDeD/6/にあります。ただし、360 度回転の問題はまだ残っているので、回答をお願いします。

于 2013-02-25T05:19:29.993 に答える