/* entire container, keeps perspective */ .flip-container { -moz-perspective: 1000; -webkit-perspective: 1000; perspective: 1000; } /* flip the pane when hovered */ /*.flip-container:hover .flipper,*/ .flip-container.hover .flipper { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } /* flip speed goes here */ .flipper { -moz-transition: 0.6s; -webkit-transition: 0.6s; transition: 0.6s; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;position: relative; }/* hide back of pane during swap */ .front-face, .back-face { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;position: absolute; top: 0; left: 0; }/* front pane, placed above back */ .front-face { z-index: 2; }/* back, initially hidden pane */ .back-face { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }