sersha
Codebase Quality Auditor
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
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.
jQuery Script
This script will execute after the user clicks the button to flip the image.
And, this is the 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
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.
- <div
id
=
"flip_ImageContainer"
>
- <img
src
=
"8.jpg"
>
- </
div
>
- <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.
- <script src="code_js.js"></script>
- <
script type=
"text/javascript"
>
- $(
"#flip_ImageURL"
)
.on
(
"click"
,
function
(
)
{
- if
(
$(
"#flip_ImageContainer"
)
.css
(
"transform"
)
==
'none'
)
{
- $(
"#flip_ImageContainer"
)
.css
(
"transform"
,
"rotateY(180deg)"
)
;
- $(
"#flip_ImageContainer img"
)
.attr
(
"src"
,
"8.jpg"
)
;
- }
- else
{
- $(
"#flip_ImageContainer"
)
.css
(
"transform"
,
""
)
;
- $(
"#flip_ImageContainer img"
)
.attr
(
"src"
,
"24.jpg"
)
;
- }
- }
)
- </
script>
And, this is the style.
- <style type=
"text/css"
>
- body {
- margin
:
auto
;
- width
:
300px
;
- }
- #flip_ImageContainer
{
- width
:
200px
;
- height
:
150px
;
- transition
:
0.9s
;
- transform-style
:
preserve-3d;
- position
:
relative
;
- }
- img {
- width
:
500px
;
- }
- .flip_ImageSubmit
{
- color
:
blue
;
- background
:
azure
;
- display
:
inline-block
;
- margin-top
:
200px
;
- padding
:
15px
;
- cursor
:
pointer
;
- border
:
blue
1px
solid
;
- border-radius
:
10px
;
- font-size
:
18px
;
- font-weight
:
bold
;
- font-family
:
cursive
;
- }
- </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
You must upgrade your account or reply in the thread to view hidden text.