javascript - 使用CSS过渡和Javascript创建移动的3d框

我一直在使用CSS尝试创建一个3d框，您可以使用 Vanilla javascript选择面部。

它只是更改box div的className并使用transition属性在位置之间平滑过渡。

这是一个jsfiddle来显示一个工作示例http://jsfiddle.net/synthet1c/VdDmA/1/

目前它看起来很酷，但是却不符合我想要的方式...有人知道在过渡过程中如何保持盒子的坚固吗？当前，如果脸部从360度变为90度，则脸部将沿错误的方向旋转270度。我了解为什么要这么做，但是无法解决。

我添加了所有浏览器前缀，但仅在Firefox中使用了它。

为任何建议而欢呼，

安德鲁
＃右，＃后，＃左，＃前
{
高度:150像素；
宽度:150像素；
position:absolute；
边框: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';
}

最佳答案

实际上很简单。您只需要检查一下是否存在差异，我们将其称为dif，即您当前所处的 Angular 与您要获得的 Angular 之间的绝对值是否超过180°，如果存在，则旋转360°减去dif为绝对值，旋转方向由dif的符号给定。
我还对CSS进行了一些更改，如果您想了解更多有关如何创建逼真的立方体you can check my (really) detailed answer to a similar question的信息。
demo
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解决。
pure CSS version of the demo