Create Horizontal Flip Image Using Simple HTML And CSS

Create Horizontal Flip Image Using Simple HTML And CSS

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Horizontal Flip Image Using Simple HTML & CSS.

The Horizontal Flip is Nothing but a card with some content inside in which when we touch on it then it makes a 180 degree rotation from the front side to the backside. Likewise, we are going to create this simple project using HTML & CSS.

So,  Let’s Begin Our Horizontal Flip Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

 

HTML CODE For Horizontal Flip Image

<div id="card">
  <figure class="front">Front Side</p></figure>
  <figure class="back">Back Side</p></figure>
</div>

In this code, First We create a div section with a class name card, and then inside of the div class we just add a figure tag with the separate class name and content that needs to be displayed. Then We closed our div class.

100+ Front-end Projects for Web developers (Source Code)

That’s for HTML, So we now add our CSS to make a Horizontal flip on the card we created.

 

CSS CODE For Horizontal Flip Image

#card {
  border:solid 1px #000;
  width: 300px;
  height: 300px;
  position: absolute;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: transform 0.4;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

figure {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 45px;
  position: absolute;
  margin: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front {background: red;}

.back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}
#card:hover {transform:rotateY(180deg);}

 

Now We have added our CSS code Successfully. So let us begin understanding each code by the steps given below.

STEP 1: First we have to mention the div class name and add some CSS properties to it. The properties were width and height for sizes, border property for borders over the card, fixing position to absolute value, and adding some of the deeper animation properties like web kit, transform, transition, transition-style, etc… with respective values in it.

Also, we include timing for each animation with animation properties. So these were the lines included in the code.

#card {
  border:solid 1px #000;
  width: 300px;
  height: 300px;
  position: absolute;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: transform 0.4;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

STEP 2: Now We just styling out the two cards and their contents using the common CSS properties with some animation on them. The properties were, width and height for sizes and font-family, colors, weight, and size for attractive texts then display and position for aligning in the required format and fixing it to the absolute value.

Lastly, Some of the animation properties like web kit back face, and visibility was hidden during 180-degree transform.

So these were the properties added in the figure section.

figure {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 45px;
  position: absolute;
  margin: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

 

STEP 3: The Third Step involves the addition of animation and background to the back side of the card to transform it from the front side to back side along with these we add a background color to the front side of the card.

.front {background: red;}

.back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

 

STEP 4: The Last Step involves adding a special line that makes the 180-degree rotation animation from the front side of the card to backside. for that, we mention the code using hover and adding the animation transform: transition rotate(Y angle) to 180 deg.

Here the line of code is given down.

#card:hover {transform:rotateY(180deg);}

 

Now We have Successfully Added the source code for the project and we came to an end now but before that, we make sure to view our project preview in the given Output Section.

FINAL OUTPUT Of Horizontal Flip

Now We have Successfully created our Horizontal Flip Project Using Simple HTML & CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Create Timeline Using HTML And CSS (Source Code)

REFER CODE – Cesar

WRITTEN BY – Ragunathan S

Share on:

Leave a Comment