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轉換不能正常工作

回答

相關問題