我一直在尝试使用 CSS 尝试创建一个 3d 框,您可以使用 vanilla javascript 选择脸部。
它只是简单地改变盒子 div 的 className 并使用 transition 属性在位置之间平滑过渡。
这里有一个 jsfiddle 来展示一个工作示例 http://jsfiddle.net/synthet1c/VdDmA/1/
它现在看起来很酷,但它的表现并不像我想要的那样......有谁知道我如何才能在它经历过渡时保持盒子坚固?目前,如果面部从 360 度变为 90 度,面部将在错误的方向上旋转 270 度。我明白为什么要这样做,但无法为它制定解决方法。
我添加了所有浏览器前缀,但只在 firefox 上使用过。
欢迎任何建议,
安德鲁 #右,#后,#左,#前 { 高度:150px; 宽度:150px; 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
关于javascript - 使用 CSS 过渡和 Javascript 创建移动的 3d 框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13549568/