Minimal setup for Flip3D CSS3 Animation

dabblet.css

.flip3D {
width:240px;
height:200px;
float:left;
}

.flip3D > * {
width:240px;
height:200px;
position:absolute;
-webkit-transform:perspective(600px);
-moz-transform:perspective(600px);
-ms-transform:perspective(600px);
-o-transform:perspective(600px);
transform:perspective(600px);
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transition:transform .5s linear 0;
-moz-transition:transform .5s linear 0;
-ms-transition:transform .5s linear 0;
-o-transition:transform .5s linear 0;
transition:transform .5s linear 0;
}

.flip3D > .front {
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
background:transparent;
z-index:1;
}

.flip3D > .back {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
background:transparent;
z-index:0;
}

.flip3D:hover > .front {
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
-o-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}

.flip3D:hover > .back {
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
}

flip3D.scss

$cardWidth : 240px;
$cardHeight : 200px;
$frontBgColor : transparent;
$backBgColor : transparent;

.flip3D{ 
	width:$cardWidth; 
	height:$cardHeight; 
	float:left;
	> * {
		width:$cardWidth; 
		height:$cardHeight;
		position:absolute;
		-webkit-transform: perspective(600px);
		-moz-transform: perspective(600px);
		-ms-transform: perspective(600px);
		-o-transform: perspective(600px);
		transform: perspective(600px);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transition: transform .5s linear 0s;
		-moz-transition: transform .5s linear 0s;
		-ms-transition: transform .5s linear 0s;
		-o-transition: transform .5s linear 0s;
		transition: transform .5s linear 0s;
	}
	> .front{
		-webkit-transform: rotateY( 0deg );
		-moz-transform: rotateY( 0deg );
		-ms-transform: rotateY( 0deg );
		-o-transform: rotateY( 0deg );
		transform: rotateY( 0deg );
		background:$frontBgColor; 
		z-index: 1;
	}
	> .back{
		-webkit-transform:  rotateY( 180deg );
		-moz-transform:  rotateY( 180deg );
		-ms-transform:  rotateY( 180deg );
		-o-transform:  rotateY( 180deg );
		transform:  rotateY( 180deg );
		background:$backBgColor;
		z-index: 0;
	}
	&:hover > .front{
		-webkit-transform: rotateY( -180deg );
		-moz-transform: rotateY( -180deg );
		-ms-transform: rotateY( -180deg );
		-o-transform: rotateY( -180deg );
		transform: rotateY( -180deg );
	}
	&:hover > .back{
		-webkit-transform: rotateY( 0deg );
		-moz-transform: rotateY( 0deg );
		-ms-transform: rotateY( 0deg );
		-o-transform: rotateY( 0deg );
		transform: rotateY( 0deg );
	}
}