How to make flip card with 5 lines CSS

Flip card is cool idea to show more information on hover effect, and you can do it with just 5 main lines.

HTML Code

This is how your HTML should be :

<div class=”card”>
<div class=”flip__container”>
<div class=”fron…


This content originally appeared on DEV Community and was authored by Ahmed Zougari

Flip card is cool idea to show more information on hover effect, and you can do it with just 5 main lines.

HTML Code

This is how your HTML should be :

<div class="card">
  <div class="flip__container">
    <div class="front__face"><!-- front content --></div>
    <div class="back__face"><!-- back content --></div>
  </div>
</div>

CSS Code

This is the basic CSS code you need :

.flip__container{
  transform-style:preserve-3d; /* line 1 */
  transition: transform 1s ease-in-out; /* speed of fliping */
}

.front__face,
.back__face{
  position:absolute; /* line 2 */
  backface-visibility: hidden; /* line 3 */
}

.back__face{
  transform:rotateY(180deg); /* line 4 */
}

.card:hover .flip__container{
  transform:rotateY(180deg); /* line 5 */
}

transform-style:preserve-3d;
=> Indicates that the children of the element should be positioned in the 3D-space.
position:absolute;
=> Make front and back face on top of each others
backface-visibility: hidden;
=> The back face is hidden, effectively making the element invisible when turned away from the user.
transform:rotateY(180deg);
=> The rotateY() function is an inbuilt function which is used to rotate an element around the vertical axis.(we used it in back face to hide it and for the hover effect to show it)

Live Demo 🎥

If you find this example complex for you, check out this simple version on Sandbox.

Thanks for reading.

Connect with me

Twitter

GitHub


This content originally appeared on DEV Community and was authored by Ahmed Zougari


Print Share Comment Cite Upload Translate Updates
APA

Ahmed Zougari | Sciencx (2022-02-19T10:07:18+00:00) How to make flip card with 5 lines CSS. Retrieved from https://www.scien.cx/2022/02/19/how-to-make-flip-card-with-5-lines-css/

MLA
" » How to make flip card with 5 lines CSS." Ahmed Zougari | Sciencx - Saturday February 19, 2022, https://www.scien.cx/2022/02/19/how-to-make-flip-card-with-5-lines-css/
HARVARD
Ahmed Zougari | Sciencx Saturday February 19, 2022 » How to make flip card with 5 lines CSS., viewed ,<https://www.scien.cx/2022/02/19/how-to-make-flip-card-with-5-lines-css/>
VANCOUVER
Ahmed Zougari | Sciencx - » How to make flip card with 5 lines CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/19/how-to-make-flip-card-with-5-lines-css/
CHICAGO
" » How to make flip card with 5 lines CSS." Ahmed Zougari | Sciencx - Accessed . https://www.scien.cx/2022/02/19/how-to-make-flip-card-with-5-lines-css/
IEEE
" » How to make flip card with 5 lines CSS." Ahmed Zougari | Sciencx [Online]. Available: https://www.scien.cx/2022/02/19/how-to-make-flip-card-with-5-lines-css/. [Accessed: ]
rf:citation
» How to make flip card with 5 lines CSS | Ahmed Zougari | Sciencx | https://www.scien.cx/2022/02/19/how-to-make-flip-card-with-5-lines-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts