RotateY转换不能正常工作

当我徘徊一次，转换是正确的，但第二次，转换变得更加奇怪，就好像透视：800px在转换发生后开始工作。请同时告诉我如何设置除中心以外的边缘旋转。我知道变换原点，但没有变换轴。RotateY转换不能正常工作

我希望当我将鼠标悬停在上面时，这些图像应该像窗口一样打开。

var left=document.getElementById("left"); 
 
var right=document.getElementById("right"); 
 
function curtain() { 
 
\t left.style.transform="rotateY(70deg)"; 
 
\t right.style.transform="rotateY(-70deg)"; 
 
} 
 
function back() { 
 
\t left.style.transform="rotateY(0deg)"; 
 
\t right.style.transform="rotateY(0deg)"; 
 
}

#animate{ 
 
    width: 400px; 
 
\t height: 300px; 
 
\t margin: auto; 
 
\t position: relative; 
 
\t perspective: 800px; 
 
} 
 
img { 
 
\t width: 100%; 
 
} 
 
#left { 
 
\t position:absolute; 
 
\t top: 0; 
 
\t right: 50%; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t width: 50%; 
 
\t transition: transform 0.5s; 
 
} 
 
#right { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0%; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t width: 50%; 
 
    transition: transform 0.5s; 
 
}

<html> 
 
    <head> 
 
\t  <link href="style/style.css" rel="stylesheet"> 
 
\t </head> 
 
\t <body> 
 
\t  <div id="animate" onmouseover="curtain()" onmouseout="back()"> 
 
\t \t  <div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div> 
 
\t \t \t <div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div> 
 
\t \t </div> 
 
\t \t <script src="script/script.js"></script> 
 
\t </body> 
 
</html>

来源

2016-05-16 Dhruv Chadha

似乎与perspective和onmouseout的问题。 back()（在onmouseout）和curtain()（在onmouseover）被称为相当不一致。每当鼠标移出元素（在这种情况下为#animate）或其子元素（图像）时调用onmouseout。孩子们被动画 - 他们移动 - 因此多次调用onmouseout。

我不会推荐onmouseover/onmouseout为此 - 而是我会使用CSS :hover。

除此之外，transform-origin定义了旋转中心。

#animate:hover #left { 
 
    transform: rotateY(70deg); 
 
} 
 

 
#animate:hover #right { 
 
    transform: rotateY(-70deg); 
 
} 
 

 
#animate { 
 
    width: 400px; 
 
    height: 300px; 
 
    margin: auto; 
 
    position: relative; 
 
    perspective: 800px; 
 
} 
 

 
img { 
 
    width: 100%; 
 
} 
 

 
#left { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 50%; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 50%; 
 
    transition: transform 0.5s; 
 
    transform-origin: left; 
 
} 
 

 
#right { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0%; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 50%; 
 
    transition: transform 0.5s; 
 
    transform-origin: right; 
 
}

<div id = 'animate'> 
 
    <div id = 'left'><img src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG'></div> 
 
    <div id = 'right'><img src = 'http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png'></div> 
 
</div>

来源

2016-05-16 14:17:22 fzzle

u能PLS被解释如何的onmouseout多次调用@fzzle ....而且是有什么我们能做的只是调用一次... –

'onmouseout'是当鼠标移出'＃animate'时调用，而且当您将鼠标移出'＃left'＆'＃right'时调用 - 当鼠标移动到其子节点外时，也调用'onmouseout'。如果你熟悉jQuery，你可以使用'.mouseenter'和'.mouseleave'。使用vanilla JavaScript来完成它非常复杂。 – fzzle

如果您将back（）中的''rotateY（0deg）''改为'“”'（一个空字符串），那么您的JavaScript解决方案就可以工作。不过，这并不能解决它被多次调用的问题。 – fzzle

-1

我不知道问题的根源，但如果你正在使用CSS悬停，而不是JS悬停工作正常。

而变换原点是要走的路，它做你想要的变换轴会做什么。

#animate{ 
 
    width: 400px; 
 
\t height: 300px; 
 
\t margin: auto; 
 
\t position: relative; 
 
\t perspective: 800px; 
 
} 
 
img { 
 
\t width: 100%; 
 
} 
 
#left { 
 
\t position:absolute; 
 
\t top: 0; 
 
\t right: 50%; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t width: 50%; 
 
\t transition: transform 0.5s; 
 
    transform: rotateY(0deg); 
 
    transform-origin: left center; 
 
} 
 
#right { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0%; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t width: 50%; 
 
    transition: transform 0.5s; 
 
    transform: rotateY(0deg); 
 
    transform-origin: right center; 
 
} 
 

 
#animate:hover #left { 
 
    transform: rotateY(70deg); 
 
    
 
} 
 
#animate:hover #right { 
 
    transform: rotateY(-70deg); 
 
    
 
}

<div id="animate" onmouseover="curtain()" onmouseout="back()"> 
 
\t \t  <div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div> 
 
\t \t \t <div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div> 
 
\t \t </div>

来源

2016-05-16 14:31:53 vals

RotateY转换不能正常工作

回答

相关问题