Card flipping by css transform, which properties need animation? - css

Question

Demo
The core of the flipping animation is on transform: rotateY(180deg);. Of course transition is needed as well for animation. I copied the code from another site, which uses transition: all ...;.
For some reason, some properties (eg: height, width) must have no transition. But I don't know which properties are essential for flipping animation.
Anyone knows how I can change the line transition: all ...; to keep the flipping animation, while not affecting unrelated properties?

Answer 1

This page explains everything and has live demos. I've just needed a simple Google search. :)
http://desandro.github.io/3dtransforms/docs/card-flip.html
Apparently, the trick is to use
transition: transform 1s;

Answer 2

change the style when you :hover on parent
.card {
-moz-perspective: 600;
-webkit-perspective: 600;
perspective: 600;
position: relative;
height: 200px;
width: 200px;
}
.card .side {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
-moz-transform-style: perserve-3d;
-webkit-transform-style: perserve-3d;
transform-style: perserve-3d;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.card .side.front {
z-index: 900;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.card:hover .side.front {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .side.back {
z-index: 800;
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card:hover .side.back {
z-index: 800;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
<article class="card">
<section class="side front">front</section>
<section class="side back">back</section>
</article>