😍 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

hima_chhag
  • downloaded
6 months 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?

axelut
  • downloaded

@hima_chhag just responded on the other comment :D
6 months ago

infoez8
  • downloaded
6 months ago

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

axelut
  • downloaded

@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!
6 months ago

shokri177
  • downloaded

asd
1 month ago

hima_chhag
  • downloaded
6 months ago

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

axelut
  • downloaded

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

pepperstreet
  • downloaded
6 months 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
6 months ago

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

axelut
  • downloaded

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

lcurry
  • downloaded

Where did you find that javascript? I can't seem to locate it?
1 month 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?
1 month ago

pepperstreet
  • downloaded

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

kaushik12joy
  • downloaded
5 months ago

very nice

ayush.shekhar
  • downloaded
5 months ago

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

rinku.tomar
  • downloaded
4 months ago

beautiful

justclick246
  • downloaded
4 months ago

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

shohanmal
  • downloaded
3 months 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.

Why our customers appreciate us

Design Quality

Design Quality

Design Quality

They see me rolling ! They loving !!!!