5

私はCSSで遊んでいて、バニラJavaScriptで顔を選択できる3Dボックスを作成しようとしています。

ボックスdivのclassNameを変更し、transitionプロパティを使用して場所間をスムーズに移行するだけです。

これが実際の例を示すjsfiddleですhttp://jsfiddle.net/synthet1c/VdDmA/1/

現時点ではかっこいいように見えますが、私が望むように動作しているわけではありません...移行中のボックスをしっかりと保つ方法を知っている人はいますか？現在、面が360度から90度になると、面は間違った方向に270度回転します。なぜそれが行われているのかは理解していますが、回避策を講じることはできません。

すべてのブラウザプレフィックスを追加しましたが、Firefoxでのみ使用しました。

アドバイスを応援します、

アンドリュー＃right、＃back、＃left、＃front {高さ：150px; 幅：150px; 位置：絶対; ボーダー：1pxソリッドrgba（200,200,200,0.7）; 背景色：rgba（0,0,255,0.5）; マージン：0px; }

.right{
    transform: rotateY(90deg) translatez(75px) translatex(-75px);
    transition: all 4s;
}

.back{
    transform: rotateY(180deg) translatez(0px) translatex(0px);
    transition: all 4s;
}

.left{
    transform: rotateY(270deg) translatez(75px) translatex(70px);
    transition: all 4s;
}

.front{
    transform: rotateY(0deg) translatez(150px) translatex(0px);
    transition: all 4s;
}


var id = function(elem){
    var theId = document.getElementById(elem);
    return theId;
}

function button1(){
    id('front').className = 'front';
    id('right').className = 'right';
    id('back').className = 'back';
    id('left').className = 'left';
}

function button2(){
    id('front').className = 'right';
    id('right').className = 'back';
    id('back').className = 'left';
    id('left').className = 'front';
}   

function button3(){
    id('front').className = 'back';
    id('right').className = 'left';
    id('back').className = 'front';
    id('left').className = 'right';
}   

function button4(){
    id('front').className = 'left';
    id('right').className = 'front';
    id('back').className = 'right';
    id('left').className = 'back';
}
4

1 に答える 1

6

実はとても簡単です。dif現在の角度と到達したい角度の絶対値の差が終わっているかどうかを確認する必要があります。終わっ180°ている場合は、絶対値で360°マイナスだけ回転します。 dif、回転の方向は。の記号で示されdifます。

また、CSSにいくつかの変更を加えました。リアルな外観の立方体を作成する方法について詳しく知りたい場合は、同様の質問に対する私の（本当に）詳細な回答を確認してください。

デモ

HTML：

<div class='buttons'>
    <button class='btn'>Front</button>
    <button class='btn'>Left</button>
    <button class='btn'>Back</button>
    <button class='btn'>Right</button>
</div>
<div class='house'>
    <div class='face front'>Front</div>
    <div class='face back'>Back</div>
    <div class='face right'>Right</div>
    <div class='face left'>Left</div>
</div>

関連するCSS：

body /* or parent of .house */ { perspective: 45em; }
.house { position: relative; transform-style: preserve-3d; transition: 1s; }
.house, .face { width: 10em; height: 10em; }
.face {
    box-sizing: border-box;
    position: absolute;
    padding: 1em;
}
.front { transform: translateZ(5em); background: rgba(255, 165, 0, .75); }
.back { 
    transform: rotateY(180deg) translateZ(5em);
    background: rgba(30, 144, 255, .75);
}
.right {
    transform: rotateY(90deg) translateZ(5em);
    background: rgba(220, 20, 60, .75);
}
.left {
    transform: rotateY(-90deg) translateZ(5em);
    background: rgba(127, 255, 0, .75);
}

JavaScript：

(function(){
    var btnsEl = document.querySelector('.buttons'), currentAngle = 0;
    btnsEl.addEventListener('click', function(e){
        var b = e.target.innerHTML.toLowerCase(), 
            house = document.querySelector('.house'), 
            btns = {'front': 0, 'left': 90, 'back': 180, 'right': -90}, 
            dif = btns[b] - currentAngle%360;
        if(!e.target.classList.contains('btn') || dif === 0) return;
        currentAngle += (Math.abs(dif) > 180) ? 
                        (Math.abs(dif) - 360)*Math.abs(dif)/dif : 
                        dif;
        house.style['-webkit-transform'] = 'rotateY(' + currentAngle + 'deg)';
        house.style['transform'] = 'rotateY(' + currentAngle + 'deg)';
    }, false); 
}());

また、純粋なCSSを使用して回転する3Dボックスを作成することもできます。ただし、>180°回転の問題はJavaScriptでのみ解決できます。

デモの純粋なCSSバージョン

于 2013-01-23T02:44:33.333 に答える