Rotating CSS Card

Please fix the manual flip behavior for IE. It is also broken in Windows Phone. Thanks!

We will have a look on IE, and come back with an update.

@cristina any update on IE flip issue fix?

how to make it rotate with iOS devices when clicked anywhere on card ?

how to make it rotate with iOS devices when clicked anywhere on card ?

So, Ive spent some time to fix the flip issue on IE for: a) Make it to work on manual flip when clicked only b) Making sure card flips correctly and rotate the content as well Here is the modified CSS code for anyone interested. This works on all modern browser included IE11 and 10. As you may know, CSS rotate is not support then on IE 9 and below. Enjoy: .col-md-4.col-sm-6.card-container-outer {} .btn:hover, .btn:focus, .btn:active { outline: 0 !important; } /* entire container, keeps perspective */ .card-container { -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; margin-bottom: 30px; transform-style: preserve-3d; } /* flip the card when hovered */ .card-container:not(.manual-flip):hover .front, .card-container.hover.manual-flip .front{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .card-container:not(.manual-flip):hover .back, .card-container.hover.manual-flip .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /* Control 3D animation and flip's speed */ .card { -webkit-transition: -webkit-transform 1.2s; -moz-transition: -moz-transform 1.2s; -o-transition: -o-transform 1.2s; -ms-transition: all 1.2s cubic-bezier(.92, .01, .83, .67); transition: transform 1.2s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } /* hide back of the card during transition */ .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; transition: 1.2s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } /* front card by default should be placed on front of the back card */ .front { z-index: 2; transform: rotateY(0deg); } /* back card, initially hidden pane */ .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); /*z-index: 3;*/ }

I try ed to do like this but till i'm getting same error.... how can i

Is it possible to time the rotation? For example, a rotation of the card every 10 seconds.

@edwin.merced of course you can do this, use this javascript -> is_flipped = 0; setInterval(function(){ if(is_flipped == 0){ $('.card').parent().addClass('manual-flip hover'); is_flipped = 1; } else { $('.card').parent().removeClass('manual-flip hover'); is_flipped = 0; } },10000);

Hi, I am noticing a strange behavior when I add new rows on the site. Please see the result of nonalignment of cards on this image https://flic.kr/p/xRr7zM

@zeca.rocha can you give me the link to the website? I have to check how the grid is acting. Thank you!

@alexpaduraru I haven't published on any web server. What do you think if I upload it on github?

Yes, upload it on github and give us the link

@alexpaduraru Take a look on https://github.com/ezequias/pensemagro

Please add all the divs with the class="col-sm-10" inside the div with class="container". If you look with inspect element in chrome you will see that there are a lot of divs outside the container.

We sent you an email with the fixed divs.

Thank you so much @alexpaduraru your advice was very good. The problem I created was solved.

Anyone please tell me the fix for manual flip behavior in IE ... its important