旋转Y轴过渡效果无法正常工作

Question

旋转Y轴过渡效果无法正常工作

4

当我第一次悬停时，转换是正常的，但第二次时，转换变得奇怪，就好像透视：800px 在转换发生后开始起作用。请还要告诉我如何设置以中心之外的边缘为轴心旋转。我知道 transform-origin，但没有类似 transform-axis 的东西。

我希望当我悬停在这个元素上时，这些图像会像窗口一样打开。

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

#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;
}
#right {
 position: absolute;
 top: 0;
 right: 0%;
 padding: 0;
 margin: 0;
 width: 50%;
    transition: transform 0.5s;
}

<html>
    <head>
     <link href="style/style.css" rel="stylesheet">
 </head>
 <body>
     <div id="animate" onmouseover="curtain()" onmouseout="back()">
      <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>
  <script src="script/script.js"></script>
 </body>
</html>

- Dhruv Chadha

2个回答

-1

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

变换原点是解决问题的方法，它可以实现你想要的transform-axis效果。

#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: rotateY(0deg);
  transform-origin: left center;
}
#right {
 position: absolute;
 top: 0;
 right: 0%;
 padding: 0;
 margin: 0;
 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()">
      <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>

- vals

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fzzle · Accepted Answer

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>