An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Some of Our Sources
- Techcrunch
- Team Treehouse
- Joshua Blankenship
- Smashing Magazine
- TutsPlus - Design
- Fuel Your Creativity
- FanExtra - PSD
- Fudge Graphics
- CSS Tricks
- Web Resource Source
Help Webnuz
Referal links:
July 16, 2020 04:20 am GMT
Original Link: https://dev.to/michaelburrows/how-to-create-an-animated-flip-card-with-css-3d-transforms-4ckj
How to create an animated flip card with CSS 3D transforms
*** Working demo on CodePen.io.
Flip cards can be created using just HTML & CSS.
They can be used in a number of ways to display more information to a user on hover.
In this example well create a flip card with an image on the front and text on the back.
First lets start with the HTML:
<div class="flip"> <div class="flip-content"> <div class="flip-front"> <img src="https://www.fillmurray.com/150/150" /> </div> <div class="flip-back"> <strong>BILL MURRAY</strong> </div> </div></div>Next add the following CSS:
.flip { width: 150px; height: 150px; text-align: center; perspective: 600px; }.flip-content { width: 100%; height: 100%; transition: transform 0.4s; transform-style: preserve-3d;}.flip:hover .flip-content { transform: rotateY(180deg); transition: transform 0.3s;}- If youre creating a card larger that 150150 youll need to increase the
perspective. - You can speed up or slow down the animation by changing
transitionspeed . - For a 360 spin effect change the rotation to
360degthis works well with single sided buttons.
If you preview what we have done so far in the browser youll see the text and image flip into a reversed state.
To achieve our desired full flip card effect this additional CSS is required:
.flip-front, .flip-back { position: absolute; height: 100%; width: 100%; line-height: 150px; backface-visibility: hidden; color: #fff; background-color: lightseagreen; border: 6px solid lightcoral; box-shadow: 6px 6px lightseagreen;}.flip-back { transform: rotateY(180deg); border: 6px solid lightseagreen; box-shadow: 6px 6px lightcoral;}Original Link: https://dev.to/michaelburrows/how-to-create-an-animated-flip-card-with-css-3d-transforms-4ckj
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To