❤️ 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

hima_chhag
  • downloaded
7 years ago

@axelut @Creative @Elena First of all, thank you so much for this beautiful animation to the cards! I have a question, I am trying to change width of the card to 50% from 33.3333%. I tried to change css, I also tried to use bootstrap class w-50, somehow, it is not responding, any possible reason?

alexpaduraru
  • owner

@hima_chhag just responded on the other comment :D
7 years ago

infoez8
  • downloaded
7 years ago

Thanks for this. Is there a way to make it rotate on hover for PCs, but rotate on touch for mobile devices?

alexpaduraru
  • owner

@infoez8 glad that you like it. We didn't try that but I think you need a Touch library like Hammer: http://hammerjs.github.io/ then you just made some if statements and see if the action is touch or click/hover. Hope this will help you. Best, Alex!
7 years ago

shokri177
  • downloaded

asd
6 years ago

hima_chhag
  • downloaded
7 years ago

@alexpaduraru Thank you so much for your help, it worked like a magic. Is it possible to add background color in front? I am trying with CSS but somehow cards are not responding!

alexpaduraru
  • owner

@hima_chhag you need to add the background-color property for the class ".front" and everything will work fine.
7 years ago

pepperstreet
  • downloaded
7 years ago

How does it work on mobile/touch devices? Recently I found a similar product and effect, and it seems to work with "touch and hold" on a WinPhone. Probably OS-dependent, isn't it. I also assume that the average mobile user does not have a clue about such a feature. What about an optional "click-to-flip" feature? (maybe by javascript). Thoughts are much appreciated.

pepperstreet
  • downloaded
7 years ago

Silly Me! Just noticed the demo with "manual flip" and small javascript! Cool.

alexpaduraru
  • owner

@pepperstreet just wanted to write this on the other comment. Glad that you've found the manual flip :-) Best, Alex!
7 years ago

lcurry
  • downloaded

Where did you find that javascript? I can't seem to locate it?
6 years ago

lcurry
  • downloaded

I found the link in the sample page but it doesn't seem to work. Maybe this is too old and no longer being updated?
6 years ago

pepperstreet
  • downloaded

@lcurry The small script is inline, see bottom of the example html page. Look for "rotateCard".
6 years ago

kaushik12joy
  • downloaded
6 years ago

very nice

ayush.shekhar
  • downloaded
6 years ago

thank u guyz .. nice work.. i mean excellent.. thanks a tne

rinku.tomar
  • downloaded
6 years ago

beautiful

justclick246
  • downloaded
6 years ago

very nice platform ...............# tHANK yOU BrO

shohanmal
  • downloaded
6 years ago

Thanks for the card! I unfortunately have a problem when using the bootstrap css along with the css for this card where top corners of the card has a unexpected square border with a lined border top. Any idea why this might be happening?

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