使用CSS转换和Javascript创建移动的3d框

我一直在玩CSS，试图创建一个3d框，你可以选择与香草javascript的脸

只需更改box div的类名，并使用transition属性在位置之间平滑过渡即可

下面是一个JSFIDLE来展示一个工作示例

它现在看起来很酷，但它的表现不是我想要的。。。有人知道我怎样才能让盒子在转换过程中保持坚固吗？当前，如果面从360度旋转到90度，则面将以错误方向旋转270度。我理解它为什么这么做，但无法找到解决办法

我添加了所有浏览器前缀，但只在firefox上使用过

为任何建议干杯

安德鲁 右，后，左，前 { 高度：150像素； 宽度：150px； 位置：绝对位置； 边框：1px实心RGBA200200,0.7； 背景色：rgba0,0255,0.5； 边际：0px； }

---

其实很简单。你只需要做一个检查，看看你当前所处的角度和你想要达到的角度之间的绝对值差，我们称之为dif，是否超过180°，如果是，你旋转360°，减去绝对值中的dif，旋转方向由dif符号给出

我还对CSS做了一些更改，如果您想了解更多有关如何创建逼真立方体的信息

HTML:

JavaScript:

此外，您还可以使用纯CSS旋转3D框。但是，>180°旋转问题只能通过JavaScript解决

---

尽管你尽了最大的努力，但这在Opera中不起作用。我不是一个很可靠的CSS人员，但从外表上看，你的方法有点奇怪。现在，您正在更改正方形的每个面的类，即分别为每个面设置动画。最好使用适当的x、y、z和弦设置每个面，然后在容器div a.k.a上执行动画。在相同的y轴上旋转它们-更好，因为你只是为实体对象设置动画，而不是使对象的每个面相互追逐。这是一个好主意。。我现在试一试，然后把结果发回来。。谢谢keithno幸运的是。。。它将愉快地旋转z轴，但y和x不工作。。z轴仅在当前面保持不变的情况下顺时针翻转长方体。。

.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';
}   

<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>

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);
}

(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); 
}());