Homework SourseI AM HAVING AN ISSUE WITH MY CODE I WANT MY CODE FLIP WHEN I
I AM HAVING AN ISSUE WITH MY CODE. I WANT MY CODE FLIP WHEN I HOVER OVER ONE PICTURE AND WHILE IM HOVERING ON THE FIRST PICTURE THE SECOND PICTURE IS ON THE BACK BUT IT ONLY FLIPS WHEN IM HOVERING OVER THE PICTURE. PLEASE HELP!!!
<html>
<head>
<script type=\"text/css\">
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
</script>
<body
<div class=\".flip-container\" ontouchstart=\"this.classList.toggle(\'hover\');\">
<div class=\".flipper\">
<div class=\".front\">
<!-- front content --><img src=\"curtis.jpg\">
</div>
<div class=\".back\">
<!-- back content --><img src=\"terrace.jpg\">
</div>
</div>
</div>
</body>
<html>
Solution
ANS:
<!--
I AM HAVING AN ISSUE WITH MY CODE. I WANT MY CODE FLIP WHEN I HOVER OVER ONE PICTURE AND WHILE IM HOVERING ON THE FIRST PICTURE THE SECOND PICTURE IS ON THE BACK BUT IT ONLY FLIPS WHEN IM HOVERING OVER THE PICTURE. PLEASE HELP!!!
-->
<html>
<head>
<style type=\"text/css\">
/* entire container, keeps perspective */
.flip-container {
width:250px;
height:250px;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .flipper {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<body>
<div class=\"flip-container\" ontouchstart=\"this.classList.toggle(\'hover\');\">
<div class=\"flipper\">
<div class=\"front\">
<!-- front content --><img src=\"curtis.jpg\" />
</div>
<div class=\"back\">
<!-- back content --><img src=\"terrace.jpg\" />
</div>
</div>
</div>
</body>
<html>
