Auto Flip Image Using Html And Css

Creative Flip Image Animation Using HTML and CSS

Creative Flip Image Animation Using HTML and CSS

Hello Coders! A very warm welcome to Codewithrandom’s Blog. In today’s blog, we’re going to create Flip Image Animation Using HTML and CSS. In This Project, we have an Image that can flip on hovering, So Let’s start how to create Flip Image Animation.

Flip Image Animation Using HTML and CSSAuto Flip Image Using HTML and CSS (Code Example)

What is a flip image?

A flip image is a CSS effect that causes an image to flip 180 degrees to the left as the viewer hovers over it. We are creating a flip image for a beginner assignment. A large website, such as an e-commerce website, where we can add the picture on the front side and the information about the product on the back side, can later add this kind of effect.

50+ HTML, CSS & JavaScript Projects With Source Code

For better understanding, you can see the live server which is given here…..

Live Preview Of Flip Image Animation:-

Code byN/A
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNo
Auto Flip Image Using HTML and CSS Table

HTML Code:-

So as you have seen in the live server when we hover over the card it flips 180 3D. you have also seen that it has only two things in the Front part it is written Front and on the back, it is written Back.

So Layout is basically easy inside a container named Flipper we need to insert two div tags named front and back. If you want to insert any content like photos or anything else.

Simple Portfolio Website Using HTML and CSS with Source Code

So the content you want to display on the front side You just need to insert that content inside the front class named tag while for the content you want to display on the back side of the card you have to insert that content inside the back named class div tag.

In this, the div class will be front and back

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        <div class="back">
            <!-- back content -->

HTML Output Of Flip Image :-.

Flip Image Animation Using HTML and CSS
flip image animation


CSS Code:-

As you have seen in the HTML output for now the Front and Back content both are visible from the front side. For making it a flippable card we need to apply CSS.

But we are using Some CSS properties which usually we don’t use while styling so let’s first look at those concepts.

Gym Website Using HTML and CSS With Source Code


The transform-style property specifies how nested elements are rendered in 3D space.

Note: This property must be used together with the transform property.

flatSpecifies that child elements will NOT preserve their 3D position. This is default
preserve-3dSpecifies that child elements will preserve their 3D position
initialSets this property to its default value. Read about initial
inheritInherits this property from its parent element. Read about inherit

We don’t need to learn about all we are using Preserve -3d. as our Card is flipping in 3D. So we need to apply transform styles as preserve -3d.


With the CSS transform the property you can use the following 3D transformation methods:

  • rotateX()
  • rotateY()
  • rotateZ()
transformApplies a 2D or 3D transformation to an element
transform-originAllows you to change the position on transformed elements
transform-styleSpecifies how nested elements are rendered in 3D space
perspectiveSpecifies the perspective on how 3D elements are viewed
perspective-originSpecifies the bottom position of 3D elements
backface-visibilityDefines whether or not an element should be visible when not facing the screen

So here we need to use the backface-visibility.

Here in this css code, there is a flip container that is hovered and rotated into 180 degrees then the weight height of the flip center front and back, and the margin will be 1em auto. Afterward, the speed of the flipper is 0.6s.
/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
} /* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
.back {
    width: 320px;
    height: 240px;
    margin: 1em auto;
} /* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
} /* hide back of pane during swap */
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    color: cornSilk;
    text-align: center;
    font: 3em/240px "Helvetica Neue", Helvetica, sans-serif;
    box-shadow: -5px 5px 5px #aaa;
} /* front pane, placed above back */
.front {
    z-index: 2; /* for firefox 31 */
    transform: rotateY(0deg);
    background: cornflowerBlue;
} /* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
    background: crimson;

Final Output Of Flip Image Animation Using Css:-

Flip Image Animation Using HTML and CSS


Flip Image Animation Using HTML and CSS

Video Output:

Finally, your  FLIP IMAGE ANIMATION USING HTML AND CSS IS finished. You can see in css output that there is no button that switches to another animation it is an automatic animation using css.
Hope you may like the blog.If any doubt comments in the comment box.


100+ JavaScript Projects With Source Code ( Beginners to Advanced)




Written by – Sayali Kharat & Himanshu Singh



Which code editor do you use for this Auto Flip Image coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.


is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?


What is the Flip Image project?

Flip images is a beginner project in which we take images and using the css concept we will add a hover property on the image.As the user hover over the image the image will automatically rotate 180 °.

Leave a Reply