Question

当我悬停一次时，过渡是正确的，但第二次过渡变得很奇怪，好像透视：800px在过渡发生后开始工作。还请告诉我如何设置除中心之外的边缘旋转。我知道变换原点，但没有像变换轴那样。

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

＆＃13;

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)";
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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>

Answer 2

我不知道问题的根源，但是如果你使用CSS悬停而不是JS悬停它就可以了。

变换原点是要走的路，它会做你想要的变换轴会做的事情。

#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>

RotateY过渡不正常

2 个答案: