❤️ Creative Tim Club - Access all our Present & Future Premium Products

Cards Snippet

Product description


We found that sometimes when we work at different websites, we want to show a lot of information in a small container. So...how can we keep a presentation card usable and beautiful when you have too much information? With the modern CSS3 3D transitions, we can make the web even more interesting.

Did you know that we can have more than 1 dimension on the web pages? If not, this is a very good starting point for you to understand how the CSS3 3D transitions are working. Since this effect resembles the action of flipping a card, it surprises the user in a nice way, while keeping the experience natural.

For this item we used Bootstrap for the 12-col grid. It helps us to keep the rotating cards responsive for any devices.

We created the design for the both faces of the card and a container-card that will let the card perform the 3D rotating action.

You can use this rotating CSS card for presentations of your team or for showing more information about the users from your platform.  We're sure you can find many other use cases for it and we would like to see them all! Just add a link in the comments and we'll let you know what we think.

So rock your project with some awesome new effects. The users will be pleasantly surprised by them, for sure!

Product certified by: Creative Tim
Rotating CSS Card - Fully Coded and Responsive HTML5
Rotating CSS Card - Crafted with Bootstrap - the most popular Front End Framework
Downloads
33,582
Version
1.4.0
Changelog
Updated
7 years ago
Released
9 years ago
Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

We are here to help you!

76 Web Developers commented on this product

max.cliff
  • downloaded
9 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
9 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
9 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
9 years ago

Looks radical

andycampbell92
  • downloaded
9 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
9 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
9 years ago

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

cristina

@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!
9 years ago

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

Thank You

daniel.montero
  • downloaded
9 years ago

no working on IOS PLS help!

cristina

@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!
9 years ago

mn_srv
  • downloaded
8 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.