The problem was that the shaking animation's transform property was overwriting the .back
element's transform property: rotateY(180deg)
.
The solution would just be to modify the animation and use a combination of transformations:
-webkit-transform: translateX(0) rotateY(180deg);
This would of course require new keyframes:
@-webkit-keyframes shakeBack {
0%, 100% {
-webkit-transform: translateX(0) rotateY(180deg);
transform: translateX(0) rotateY(180deg);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px) rotateY(180deg);
transform: translateX(-10px) rotateY(180deg);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px) rotateY(180deg);
transform: translateX(10px) rotateY(180deg);
}
}
You now need to add a different animation based on whether the front/back of the element is visible.
.shakeBack {
-webkit-animation-name: shakeBack;
animation-name: shakeBack;
}
Modified JS - this could be written better, but you get the point.
$('.shaker.front .shake').on('click', function (e) {
$(this).parents('.shaker').addClass('animated shake');
});
$('.shaker.back .shake').on('click', function (e) {
$(this).parents('.shaker').addClass('animated shakeBack');
});