CSS ideas and methods #12 – Animated flipping card with out JavaScript




Desk of Contents

On the subject of portfolio, creativity issues. In a reality, creativity may also help you being employed by potential shopper. All you must do is to impress him. A technique that we are going to observe at this time, is through CSS rework property, a little bit of 3D and a few transition as a cherry on prime. Our purpose for this problem will likely be to create a card that can flip on hover. This card can have two totally different sides and it’ll change between them, so it’ll act like an actual card.

You should use this characteristic in your portfolio for instance, by inserting a snapshot of your work on one facet and hyperlink with description on one other. On this submit, we’ll make it simpler and solely use two totally different pictures.

Besides two pictures for back and front facet of the cardboard no different exterior sources will likely be wanted.

Codepen dwell demo:

https://codepen.io/d3v3r0/pen/onhkF

Github codes:

https://github.com/d3v3r0/flip-card-css

HTML

HTML setting for this challenge will likely be quite simple. We are going to want solely 4 div parts. First can have class “card-container”. Inside this div will likely be nested div with class ”sides”. The final two div parts, “entrance” and “again”, will likely be wrapped positioned in div “sides”.

HTML:

<div class="card-container" >
 <div class="sides">
  <div class="entrance"></div>
  <div class="again"></div>
 </div>
</div>

That is all for HTML so we will transfer to CSS and make every part work precisely like we would like.

CSS

Earlier than we will create flipping impact, we now have to model up the div parts. Let’s begin with “card-container” and each side by setting their “width” property to “320px” and “top” to “480px”. After this, we will end styling of “card-container” div by setting “perspective” property to “100”. The “perspective” property defines what number of pixels is the ingredient distant from the view.

CSS:

.card-container, .entrance, .again {
 width: 320px;
 top: 480px;
}
.card-container {perspective: 100;}

Subsequent is to model up the div with class “sides”. We are going to begin by setting its “place” property to “relative” and “transform-style” to “preserve-3d”. “transform-style” property specifies how parts contained in the “sides” div will likely be rendered. To smoother the flipping impact, let’s add a “transition“ and set it to “.6s”.

CSS:

.sides {
 place: relative;
 transform-style: preserve-3d;
 transition: .6s;
}

Now we’ll arrange CSS that can apply for each of the perimeters. Very first thing is to set their “place” property to “absolute” together with “prime” and “left” properties set to “0”. Since, “sides” div is positioned comparatively, each side will likely be positioned in its prime left nook. On the final line will likely be “backface-visibility” set to hidden. This can be certain that, when not dealing with the display, all parts (sides) will likely be hidden. With out this, we might get a glitch on flip impact within the type of displaying incorrect facet of the cardboard.

CSS:

.entrance,
.again {
 place: absolute;
 prime: 0;
 left: 0;
 backface-visibility: hidden;
}

Entrance facet or face of the cardboard will likely be easy. It can require 4 strains of code beginning with “z-index” set to “2” to position the “entrance” div into forefront. Subsequent is “background” linked to exterior picture. For this, I selected a canopy of comedian guide about Lex Luthor and Superman referred to as Man of Metal. Measurement of the background will likely be “100%” for each, width and top so the picture will cowl complete are of div irrespective of the ratio. We can even embrace a repair for some browsers in kind “rework” property set to “rotateY(0deg)”.

CSS:

.entrance {
 z-index: 2;
 background: url(http://static.tvtropes.org/pmwiki/pub/pictures/4567_400x600.jpg) no-repeat;
 background-size: 100% 100%;
 rework: rotateY(0deg);
}

After entrance facet, we now have to place collectively the again facet of card. As with entrance we can even use “background” and hyperlink it to exterior picture. Now it will likely be cowl of older challenge of Superman comedian guide. Measurement will likely be once more “100%”. Nevertheless, in case of again facet, the “rework” property will likely be set to “rotateY(180deg)”. This can permit the again facet to be seen when the cardboard is flipped. With out it, it could stay clean.

CSS:

.again {
 background: url(http://i1-news.softpedia-static.com/pictures/news2/Superman-Defined-Why-the-Pink-Underwear-over-the-Costume-2.jpg) no-repeat;
 background-size: 100% 100%;
 rework: rotateY(180deg);
}

Very last thing to do is to arrange the flipping impact. We are going to choose “card-container” on “hover” state adopted by “sides” div. For this let’s create rule containing “rework” property set to “rotateY(180deg)”. Because of this, once we hover over the “card-container” div, div with class “sides” will flip itself round its y axis for 180 levels and sides will likely be switched.

CSS:

.card-container:hover .sides {rework: rotateY(180deg);}

Abstract

Good job. Problem accepted and solved. We’ve got card with clean flipping impact on hover identical to we wished. There are numerous modifications you do to the impact, like flipping vertically as a substitute of horizontally for instance. It’s also possible to add fading if you would like. I hope you had enjoyable doing this tutorial.

For those who favored this text, please subscribe so you do not miss any future submit.








If you would like to help me and this weblog, you may change into a patron, or you should purchase me a espresso 🙂







Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#CSS #ideas #methods #Animated #flipping #card #JavaScript