Rotating CSS Card

Cards Snippet
· 4.80/5 (108 Reviews)

MIT License

20,243 Downloads
73 Comments
Community Support
6 months Updates
Release: 4 years ago
Update: 2 years ago
Product certified by: Creative Tim

We are here to help you!

73 Web Developers commented on this product

Report issue

hima_chhag
  • downloaded
1 year 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
  • downloaded

@hima_chhag just responded on the other comment :D
1 year ago

infoez8
  • downloaded
1 year ago

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

alexpaduraru
  • 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!
1 year ago

shokri177
  • downloaded

asd
1 year ago

hima_chhag
  • downloaded
1 year 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
  • downloaded

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

pepperstreet
  • downloaded
1 year 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
1 year ago

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

alexpaduraru
  • downloaded

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

lcurry
  • downloaded

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

pepperstreet
  • downloaded

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

kaushik12joy
  • downloaded
1 year ago

very nice

ayush.shekhar
  • downloaded
1 year ago

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

rinku.tomar
  • downloaded
1 year ago

beautiful

justclick246
  • downloaded
1 year ago

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

shohanmal
  • downloaded
1 year 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.