Geek Answers Handbook

RotateY transition is not working properly

When I find it once, the transition is correct, but the second time the transition becomes weirder, as if the perspective: 800px starts working after the transition. Also tell me how I can set the rotation around the edge except the center. I know about the origin of the transformation, but nothing like the axis of transformation.

I want the hover over these images to open like a window.

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>
Run codeHide result
+4
source share
2 answers

, perspective onmouseout. back() (in onmouseout) curtain() (in 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>
Hide result
+4

, , CSS JS hover.

- , , .

#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>
Hide result
-1

More articles:


All Articles