How To Flip The Image

[sersha]

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.

Download