RotateYトランジションが正常に動作しない

トランジションが正しく行われたが、トランジションが行われたあとにパースペクティブ：800pxが動作しているかのように、トランジションは適切ですが、2回目になります。センター以外のエッジを中心に回転を設定する方法も教えてください。私はtransform-originについて知っていますが、transform-axisなどは何も分かりません。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）は、かなり矛盾していると呼ばれます。 onmouseoutは、マウスが要素（この場合は#animate）またはその子（画像）の外側に移動するたびに呼び出されます。子どもたちはアニメーション化され、移動するため、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'を使うことができます。バニラJavaScriptを使用するのは非常に複雑です。 – fzzle

'back（）'の '' rotateY（0deg） ''を '' ''（空文字列）に変更すると、JavaScriptの解決策が有効になる可能性があります。これは、それが複数回呼び出されていることを修正するものではありません。 – fzzle

-1

私は、問題の原因を知りませんが、あなたが代わりにJSホバーのCSSホバーを使用している場合には、[OK]を動作します。

そして変換起源を移動するための方法で、それが何をするか、あなたの望んでいた変換軸を行うだろう。

#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トランジションが正常に動作しない

答えて

関連する問題