Неправильно работает переход 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) называются совершенно непоследовательно. 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

может у PLS объяснить, как onmouseout вызывается несколько раз @fzzle .... и есть все, что мы можем сделать, чтобы назвать это только один раз ... –

'onmouseout' является когда мышь выведена из '# animate', но также когда вы перемещаете мышь из' # left' и '# right' -' onmouseout' также вызывается, когда мышь перемещается за пределы своих дочерних элементов. Если вы знакомы с jQuery, вы можете использовать '.mouseenter' и' .mouseleave'. Это довольно сложно сделать с помощью ванильного JavaScript. – fzzle

Ваше JavaScript-решение могло бы работать, если вы измените '' rotateY (0deg) "' в 'back()' на '' '' (пустую строку). Это не исправило бы, что это называется несколько раз. – 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

ответ

Смежные вопросы