😍 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

max.cliff
  • downloaded
3 years ago

If i go to the live preview, then I open it in iphone with safari, it's not responsive. Here the link http://ct-freebies.herokuapp.com/rotating-card?

ed.wrede
  • downloaded
2 years ago

Hi @cristina Love this concept, absolutely awesome! Just thought I'd mention though that it doesn't seem to play well on mobile. Using Chrome on Android in 4.4.2, when you tap on a card it rotates to show the back, but then wont rotate to the font again. Also when you tap on the second or third cards in the live demo, it seems to turn all the cards not just the one you tapped on. Not sure if this is an issue with Chrome on Android or where the issue may be? Thanks again though.

andy.sheppard
  • downloaded
2 years ago

I'm also having a problem on iOS - it works great on desktops, even in >=IE10. Link is at http://www.weekeprimary.com/curriculum/literacy.php#keywordlist in case anybody is bored!

z..aurelius
  • downloaded
2 years ago

Looks radical

andycampbell92
  • downloaded
2 years ago

Hey this is really great but My links don't seem to work on the card is there any known reason why this may be happening, I notice the links work fine in the live demo. For me my pointer doesn't change no matter what element I hover over.

andycampbell92
  • downloaded
2 years ago

Hey people with issues on iOS, the :hover css selector only seems to be triggered on images. A hacky solution I have done is to create a transparent image the full size of the card and just overlay the front of the card with it. This will make the entire front clickable.

amv8vantage
  • downloaded
2 years ago

Is there a way I can make the cards rotate when clicked?

cristina
  • owner

@amv8vantage we saw that there are many persons who want to make the rotation on the click trigger. We will make this option available in the future update. Thank you for the feedback. We keep you posted!
2 years ago

Мария.Смирнова
  • downloaded
2 years ago

Thank You

daniel.montero
  • downloaded
2 years ago

no working on IOS PLS help!

cristina
  • owner

@daniel.montero and the other guys. We added a manual trigger that will rotate the card. You have an example on the live preview and in the zip package 1.3. You can use that trigger for touch screens so the users will not have a problem when they touch the cards, they will explicit click on "Flip Card" to rotate it. Good luck!
2 years ago

mn_srv
  • downloaded
2 years ago

Manual flip is not working on IE (11, 10, 9). Card flips on mouse over. It disregards the manual flip function. Any idea why?

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 !!!!