How can I style the backface of a rotated element?

Question

I have a figure which is rotatable (to any degree via user input) this rotation visibly rotates using the transition property. When this element is rotated by more than 90deg/-90deg the backface of the element is visible. I'm wanting to style this usually-hidden side of the element differently to how the front side is styled, but I'm not sure how this can be achieved.

figure {
    background:#fff;
    color:#000;
    border:1px solid #000;
    transition:1s;
}

figure:hover {
    transform:rotateY(180deg);
}

Current Style (Browser Default):

Desired Style:

Is there any way I can style the backface of an element differently to the front?

Here is a basic JSFiddle demo of this rotation (on hover): http://jsfiddle.net/Y89t3/

Answer 1

If the background doesn't need to reproduce the front, it can be done with a pseudo element:

webkit demo

The CSS is:

.test { 
    width: 100px;
    height: 100px;
    position: relative;
    left: 30px;
    top: 30px;
    background-color: lightgreen;
    transition: all 2s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.test:after {
    content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to right, black, transparent);
    -webkit-transform: rotateY( 180deg );
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}


.container:hover .test {
  -webkit-transform: rotateY( 180deg );
}

Most of it is auxiliary stuff. The only interesting issues are setting the pseudo element rotated 180 deg (as the backface) and setting backface visibility to hidden.

I have tried to keep the original content of the div visible, and found something that I don't understand; I will post that as a question

Answer 2

go here, this will show you how to do it http://desandro.github.io/3dtransforms/docs/card-flip.html