Rotating CSS Card

Cards Snippet
· 4.80/5 (106 Reviews)

MIT License

19,696 Downloads
73 Comments
Regular Support
Lifetime 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

lance.bitner
  • downloaded
2 years 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
2 years ago

Has this ever been used inside a carousel?

alexpaduraru
  • 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!
2 years ago

dhage.jayesh
  • downloaded
2 years ago

nice job

flynch55
  • downloaded
2 years ago

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

alexpaduraru
  • 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!
2 years ago

theprez 2 years 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
2 years 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?

alexpaduraru
  • 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?

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

@alexpaduraru 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
1 year 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?

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

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

Why our customers appreciate us

Design Quality

Design Quality

Design Quality