😍 Case Study: "How we built from scratch Light Bootstrap Dashboard" on one of the biggest publications on Medium: FreeCodeCamp.

Rotating CSS Card

Cards Snippet
· 4.80/5 (67 Reviews)

MIT License

15,944 Downloads
64 Comments
Regular Support
Lifetime Updates
Release: 3 years ago
Update: 1 year ago
Icon html
Icon bootstrap
Product certified by: Creative Tim

We are here to help you!

64 Web Developers commented on this product

bic.app 2 years ago

Please fix the manual flip behavior for IE. It is also broken in Windows Phone. Thanks!

cristina
  • owner

We will have a look on IE, and come back with an update.
2 years ago

gautam.chaudhary
  • downloaded

@cristina any update on IE flip issue fix?
2 years ago

simren.arora
  • downloaded
2 years ago

how to make it rotate with iOS devices when clicked anywhere on card ?

simren.arora
  • downloaded
2 years ago

how to make it rotate with iOS devices when clicked anywhere on card ?

mn_srv
  • downloaded
2 years ago

So, Ive spent some time to fix the flip issue on IE for: a) Make it to work on manual flip when clicked only b) Making sure card flips correctly and rotate the content as well Here is the modified CSS code for anyone interested. This works on all modern browser included IE11 and 10. As you may know, CSS rotate is not support then on IE 9 and below. Enjoy: .col-md-4.col-sm-6.card-container-outer {} .btn:hover, .btn:focus, .btn:active { outline: 0 !important; } /* entire container, keeps perspective */ .card-container { -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; margin-bottom: 30px; transform-style: preserve-3d; } /* flip the card when hovered */ .card-container:not(.manual-flip):hover .front, .card-container.hover.manual-flip .front{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .card-container:not(.manual-flip):hover .back, .card-container.hover.manual-flip .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /* Control 3D animation and flip's speed */ .card { -webkit-transition: -webkit-transform 1.2s; -moz-transition: -moz-transform 1.2s; -o-transition: -o-transform 1.2s; -ms-transition: all 1.2s cubic-bezier(.92, .01, .83, .67); transition: transform 1.2s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } /* hide back of the card during transition */ .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; transition: 1.2s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } /* front card by default should be placed on front of the back card */ .front { z-index: 2; transform: rotateY(0deg); } /* back card, initially hidden pane */ .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); /*z-index: 3;*/ }

budaraju08
  • downloaded

I try ed to do like this but till i'm getting same error.... how can i
1 year ago

edwin.merced
  • downloaded
2 years ago

Is it possible to time the rotation? For example, a rotation of the card every 10 seconds.

axelut
  • downloaded

@edwin.merced of course you can do this, use this javascript -> is_flipped = 0; setInterval(function(){ if(is_flipped == 0){ $('.card').parent().addClass('manual-flip hover'); is_flipped = 1; } else { $('.card').parent().removeClass('manual-flip hover'); is_flipped = 0; } },10000);
2 years ago

zeca.rocha
  • downloaded
2 years ago

Hi, I am noticing a strange behavior when I add new rows on the site. Please see the result of nonalignment of cards on this image https://flic.kr/p/xRr7zM

axelut
  • downloaded

@zeca.rocha can you give me the link to the website? I have to check how the grid is acting. Thank you!
2 years ago

zeca.rocha
  • downloaded
2 years ago

@axelut I haven't published on any web server. What do you think if I upload it on github?

axelut
  • downloaded

Yes, upload it on github and give us the link
2 years ago

zeca.rocha
  • downloaded
2 years ago

@axelut Take a look on https://github.com/ezequias/pensemagro

axelut
  • downloaded

Please add all the divs with the class="col-sm-10" inside the div with class="container". If you look with inspect element in chrome you will see that there are a lot of divs outside the container.
2 years ago

axelut
  • downloaded

We sent you an email with the fixed divs.
2 years ago

zeca.rocha
  • downloaded
2 years ago

Thank you so much @axelut your advice was very good. The problem I created was solved.

u
  • downloaded
2 years ago

Anyone please tell me the fix for manual flip behavior in IE ... its important

You have to be logged in to post a comment. Login here.

Why our customers appreciate us

Design Quality

Design Quality

Design Quality

They see me rolling ! They loving !!!!