Interested in all of our Premium Products? Get the 'Big Bundle' with 95% discount!

Rotating CSS Card

Cards Snippet
· 4.80/5 (73 Reviews)

MIT License

16,673 Downloads
66 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!

66 Web Developers commented on this product

lance.bitner
  • downloaded
1 year ago

I have been using a card hover action to get the card to rock. The action I want is below. It works fine in Chrome and Firefox but not in IE11. In IE it looks sloppy and It does the odd 360degree flip. Apparently IE does this often to hover actions. Do you know an way around this? A way to make it do in IE the same thing it does in Chrome and Firefox, which is a clean horizontal flip?: .card:hover{ -moz-transform: perspective(3000px) rotateY(-30deg) translateX(15px); -ms-transform: perspective(3000px) rotateY(-30deg) translateX(15px); -o-transform: perspective(3000px) rotateY(-30deg) translateX(15px); -webkit-transform: perspective(3000px) rotateY(-30deg) translateX(15px) translateZ(200px) scale(0.8); transform: perspective(3000px) rotateY(-30deg) translateX(15px); }

robert.sandoval
  • downloaded
1 year ago

Has this ever been used inside a carousel?

axelut
  • downloaded

@robert.sandoval we didn't test it in a carousel so we can't tell if they are working fine or not. Please check it and let us know your feedback. Best, Alex!
1 year ago

dhage.jayesh
  • downloaded
1 year ago

nice job

flynch55
  • downloaded
1 year ago

Is there a way to select the back or the front of the card to be displayed on first invocation?

axelut
  • downloaded

@flynch55 thank you for using our product. At this moment, this behaviour is not implemented you can play with the classes and add via Javascript the "hover" state when you want to show directly the back face of the card. It's like the manual trigger but you apply it on the first invocation. Hope this helps you. Best, Alex!
1 year ago

theprez 1 year ago

I've discovered this plugin and want to use it on my Wordpress site. The problem is I don't know how to start. Can someone please point me in the right direction :)

eward
  • downloaded
1 year ago

Wow these cards look great! But for some reason when I download and try to use the files, the auto flip work perfectly and the manual will not "flip". The JavaScript fires on the button click, the card starts to animate and then stops! Any suggestions?

dylan.wood
  • downloaded
1 year ago

I am using this and I changed the with of the cards to more of a business card proportion. When you rollever with the mouse it still works but the animation is jittery, any ideas?

axelut
  • downloaded

@dylan.wood thank you for using our product. Can you please send us the link to your website? In this way, we will know exactly what you built and we can give you a solution. Best, Alex!
1 year ago

lauradhu
  • downloaded
1 year ago

When I modify the contents of the shortcode in Wordpress, nothing changes. How do I change the contents of the front and back sides of the card?

axelut
  • downloaded

@lauradhu thank you for contacting us. Unfortunately, the Wordpress plugin was not built by us, it was built by somebody else so we cannot tell you what can be the cause of not showing the content because we don't have experience with Wordpress. Please contact the creator of the plugin on the website where you downloaded it, so you can get more details. Best, Alex!
1 year ago

trix
  • downloaded
10 months ago

@axelut could your team please assist me on why my card break when sized down to iphone 6 size? www.sanicleanducts.com/testing

hima_chhag
  • downloaded
8 months ago

@axelu 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 thank you for using our snippet. Please check the documentation for Bootstrap 3 (http://getbootstrap.com/css/#grid), not Bootstrap 4. Use col-md-6 instead of col-md-4 and you will have the cards with 50% of the entire container. Hope this is helping you. Best, Alex!
8 months ago

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

Why our customers appreciate us

Design Quality

Design Quality

Design Quality