我一直在玩CSS尝试创建一个3D框,你可以用香草javascript选择面部 .
它只是更改框div的className,并使用transition属性在位置之间平滑过渡 .
这是一个显示工作示例的jsfiddle http://jsfiddle.net/synthet1c/VdDmA/1/
它目前看起来很酷,但它的表现并不像我想要的那样......有没有人知道如何在盒子过渡时保持盒子稳固?目前,如果脸部从360度变为90度,脸部将以错误的方向旋转270度 . 我明白为什么它这样做却无法解决它 .
我添加了所有的浏览器前缀,但只在firefox上使用过它 .
欢呼任何建议,
Andrew #right,#back,#left,#front {height:150px;宽度:150px;位置:绝对;边界:1px solid rgba(200,200,200,0.7); background-color: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';
}
1 回答
它's actually pretty simple. You just need to do a check to see whether the difference, let' s称之为
dif
,在您当前所处的角度与您想要达到的角度之间的绝对值超过180°
,如果是,则以绝对值旋转360°
减去dif
,旋转方向为由dif
的标志给出 .我还对CSS做了一些更改,如果你想了解更多关于如何创建逼真的立方体的信息,you can check my (really) detailed answer to a similar question .
演示
HTML :
相关 CSS :
JavaScript :
此外,您可以使用纯CSS执行旋转3D框 . 但是,>
180°
旋转问题只能通过JavaScript解决 .纯CSS版本的演示