Yogesh Chauhan's Blog

How to create a flip effect with CSS?

in CSS on March 28, 2021

I’m sure there are multiple ways to do this but here’s one way to do it. The concept is setting the front and back of the card on each other using position:absolute.

Let’s start with a simple HTML elements first.

Let’s adjust the HTML elements with some CSS style.

We’re going to need a container with position:relative and then two sides (front and back) with position:absolute.

Nice. Now, the front and back sides are on top of each other. The next step is to hide the back side.

We are going to use transform property and set it to 180deg for the .column-back. That alone won’t work because it will set a mirror image visible for the back element. We need to hide the mirror image using backface-visibility property.

Just like this:

Since we have set the front and back of the element, what we can do is just rotate the entire element on hover to create the flip effect.

Just like this:

As you can see in the demo above, we see the same image on hover but on the other side as a mirror image. It’s because we haven’t set the backface-visibility property for the front side.

It’s still in the 2D rotation. We need to change it by setting transform-style property to preserve-3d on the main container.

Just like this:

Still, we don’t see the flip because we haven’t set the transform property yet. Let’s do it.

That’s it. There is a flip card ready in the demo above.

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Solution for “Yarn build: Failed because of a stylelint error”WordPressWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscellaneousContent Blocks in SCSS (Sass)SCSSDoes :is() pseudo selector hint at CSS preprocessing in the future?CSSHow to overwrite file contents with new content in PHP?PHPCheck if any column has NULL values in PostgresPostgres