Javascript 旋转过渡工作不正常

当我悬停一次时，转换是正确的，但在第二次，转换变为wierd，好像透视图：800px在转换发生后开始工作。 还请说明如何设置除中心外的边的旋转。 我知道变换原点，但不知道变换轴

我希望当我在屏幕上悬停时，这些图像应该像窗口一样打开

var left=document.getElementById（“left”）；
var right=document.getElementById（“right”）；
功能窗帘（）{
左.style.transform=“旋转（70度）”；
右.style.transform=“rotateY（-70度）”；
}
函数back（）{
左.style.transform=“旋转（0度）”；
右.style.transform=“旋转（0deg）”；
}

#制作动画{
宽度：400px；
高度：300px；
保证金：自动；
位置：相对位置；
透视图：800px；
}
img{
宽度：100%；
}
#左{
位置：绝对位置；
排名：0；
右：50%；
填充：0；
保证金：0；
宽度：50%；
转变：转变0.5s；
}
#对{
位置：绝对位置；
排名：0；
右：0%；
填充：0；
保证金：0；
宽度：50%；
转变：转变0.5s；
}

透视图和onmouseout似乎存在问题

back（）

（in

onmouseout

）和

窗帘（）

（in

onmouseover

）的调用非常不一致<每当鼠标移动到元素（本例中为动画）或其子元素（图像）之外时，都会调用code>onmouseout。孩子们被设置动画-他们移动-因此，

onmouseout

被多次调用

为此，我不建议使用

onmouseover

/

onmouseout

，而是使用CSS

：hover

除此之外，

变换原点

定义了旋转中心

#动画：悬停#左{
变换：旋转（70度）；
}
#动画：悬停#右{
变换：旋转（-70度）；
}
#生动活泼{
宽度：400px；
高度：300px；
保证金：自动；
位置：相对位置；
透视图：800px；
}
img{
宽度：100%；
}
#左{
位置：绝对位置；
排名：0；
右：50%；
填充：0；
保证金：0；
宽度：50%；
转变：转变0.5s；
变换原点：左；
}
#对{
位置：绝对位置；
排名：0；
右：0%；
填充：0；
保证金：0；
宽度：50%；
转变：转变0.5s；
变换原点：右；
}

---

我不知道问题的根源，但是如果您使用CSS hover而不是JS hover，它可以正常工作

变换原点就是要走的路，它做你想要的变换轴会做的事情

#制作动画{
宽度：400px；
高度：300px；
保证金：自动；
位置：相对位置；
透视图：800px；
}
img{
宽度：100%；
}
#左{
位置：绝对位置；
排名：0；
右：50%；
填充：0；
保证金：0；
宽度：50%；
转变：转变0.5s；
变换：旋转（0度）；
变换原点：左中心；
}
#对{
位置：绝对位置；
排名：0；
右：0%；
填充：0；
保证金：0；
宽度：50%；
转变：转变0.5s；
变换：旋转（0度）；
变换原点：右中心；
}
#设置动画：向左悬停{
变换：旋转（70度）；
}
#动画：悬停#右{
变换：旋转（-70度）；
}

你能解释一下onmouseout是如何在fzzle被多次调用的吗？我们能做些什么来只调用一次吗？当鼠标移出

#animate

时，onmouseout被调用，但是，当您将鼠标移出

#左

和

#右

-

鼠标移出时

也会被调用。如果您熟悉jQuery，可以使用

.mouseenter

和

.mouseleave

。使用普通JavaScript非常复杂。如果您将

back（）

中的

旋转（0deg）

更改为

”

（空字符串），您的JavaScript解决方案就可以工作。不过，这并不能解决多次调用的问题。我制作了两个按钮，并将它们指定为animate（）和back（）onclick……。这两个按钮不在父div中……我想这次应该没有问题……但仍然存在相同的问题@Fzzle我知道buddy thanx就是这么做的，但我担心的是，即使在按钮的创建上，为什么转换仍然不正常@fzzle