cdub cdub - 3 months ago 14
jQuery Question

Using CSS3 transforms to flip (rotate and scale) a block

I have to div boxes:

<div class="front"></div>
<div class="back"></div>


I then have CSS like so:

.back:hover {
transform: scale(2) rotateX(0deg);
}

.front:hover {
transform: rotateX(180deg) scale(1);
}


So I need the transform to flip the divs which it does fine on its own. But how do I scale it to 2x after the flip?

Answer

I suggest keyframes

@keyframes scaleUp {
    50%{
        Transform: scale(2) rotate(0);
    }
    100%{
        Transform: scale(2) rotate(180deg);
    }
}
.front {
    animation: scaleUp 1s forwards;
}

Or atleast something in that direction