CSS Card Flip Generator?

Generate the CSS code to flip an element - div in this case - which can contain child elements (with some IE backward compatability issues) using 3D transforms, transitions and control for the direction and anchor point (transform origin). Vendor prefixes are included for maximum backward compatability.

CSS Card Flip Options

Card Width (PX)

Card Height (PX)

Perspective

Use 3D

Hide Backface

Speed (MS)

Transform Origin

Transition

Flip On

Degrees (Start)

Degrees (End)

The front side

Dark side of the moon

CSS

Change the settings above in order to generate the Card Flip CSS.

HTML

<div class="card-container">
	<div class="card">
		<div class="front">
			<p>The front side</p>
		</div>
		<div class="back">
			<p>Dark side of the moon</p>
		</div>
	</div>
</div>