Auto Flip Image Using Html And Css (Code Example)

Auto Flip Image Using Html And Css (Code Example)

Auto Flip Image Using Html And Css (Code Example)
Auto Flip Image Using Html And Css (Code Example)

 

A very warm welcome to code with random’s today’s blog in which we’re going to create auto flip image animation using html and css(basically a card which can flip /rotate on hovering)…..
So… Let’s start to learn how to create auto-flip animation…..
For better understanding, you can see the live server which is given here…..

Live Preview Of Auto Flip Image

HTML CODE For Auto Flip Image:-

So as you have seen in the live server when we hover on the card it flips 180 3D.and 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 basicaaly 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.

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 -->
            Front
        </div>
        <div class="back">
            <!-- back content -->
            Back
        </div>
    </div>
</div>

HTML OUTPUT Of Auto Flip Image :-.

auto flip image animation
auto flip image animation

CSS CODE Of Auto Flip Image:-

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 lookout at those concepts first.

transform-styles:-

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

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

flat Specifies that child elements will NOT preserve their 3D position. This is default
preserve-3d Specifies that child elements will preserve their 3D position
initial Sets this property to its default value. Read about initial
inherit Inherits 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.

Preserve-3d:-

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

  • rotateX()
  • rotateY()
  • rotateZ()
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
backface-visibility Defines 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);
}
.flip-container,
.front,
.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 */
.front,
.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;
}

CSS OUTPUT Of Auto Flip Image:-

Flipping Animation

Flipping Animation

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

THANK YOU!

Written by – Sayali Kharat & Himanshu Singh

Share on:

Leave a Comment