How To Flip The Image

Submitted by alpha_luna on Thursday, April 28, 2016 - 11:32.

Good Day!!!

In this tutorial, we are going to learn on How To Flip The Image with jQuery and CSS3. We all know CSS is used to add style to our projects or design to attract the user. And to improve the GUI of the projects. In this case, we use jQuery and CSS3 to flip the image in a horizontal direction. CSS3 transform property that we are going to use to flip images. HTML Source Code This code has a button to flip the image.
  1. <div id="flip_ImageContainer">
  2.         <img src="8.jpg">
  3. </div>
  4. <div id="flip_ImageURL" class="flip_ImageSubmit">Flip the Image</div>
jQuery Script This script will execute after the user clicks the button to flip the image.
  1. <script src="code_js.js"></script>
  2. <script type="text/javascript">
  3.         $("#flip_ImageURL").on("click",function(){
  4.                 if($("#flip_ImageContainer").css("transform") == 'none') {
  5.                         $("#flip_ImageContainer").css("transform","rotateY(180deg)");
  6.                         $("#flip_ImageContainer img").attr("src","8.jpg");
  7.                 }
  8.                 else {
  9.                         $("#flip_ImageContainer").css("transform","");
  10.                         $("#flip_ImageContainer img").attr("src","24.jpg");
  11.                 }
  12.         })
  13. </script>
And, this is the style.
  1. <style type="text/css">
  2. body {
  3.         margin:auto;
  4.         width:300px;
  5. }
  6. #flip_ImageContainer {
  7.         width: 200px;
  8.         height: 150px;
  9.         transition: 0.9s;
  10.         transform-style: preserve-3d;
  11.         position: relative;
  12. }
  13. img {
  14.         width:500px;
  15. }
  16. .flip_ImageSubmit {
  17.     color: blue;
  18.     background: azure;
  19.     display: inline-block;
  20.     margin-top: 200px;
  21.     padding: 15px;
  22.     cursor: pointer;
  23.     border: blue 1px solid;
  24.     border-radius: 10px;
  25.     font-size: 18px;
  26.     font-weight: bold;
  27.     font-family: cursive;
  28. }
  29. </style>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Tags
3D flip content
image flipping
css3 animation
CSS3

Comments

Submitted by Chris Whitney (not verified) on Tue, 11/08/2022 - 09:41

$ is not defined , is the message I get when I debug it

Add new comment

About text formats