graceful degradation

dabblet.css

/**
 * graceful degradation
 */
 /* background: #7b1270;*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);

html {
	font-family: "Open Sans", sans-serif;
	min-height: 100%;
}

body {
	padding-top:50px;
	font-size: 10px;
	background: linear-gradient(45deg, #f06, rgb(24,33,120));  /* IE !! */
	min-height: 100%;
}

.container { 
	font-size: 1.5rem; 
	width: 7.5rem;
	height: 3rem;
	position: relative;
	perspective: 800px;
	margin-bottom: 0.8rem;
}

.card {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	transition: transform 1s;
	transform-origin: right center;
	color: white;
}

.card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card .front, .card .back {
  border-radius: 1rem; /* IE !! */
  padding-top: 0.6rem;
  padding-left: 1.6rem;
  width: 100%;
}

.card .front {
  background: #24588d;
}

.card .back {
  background: white;
  transform: rotateY( 180deg );
  color: #24588d;
}
.container:hover .card {
  transform: rotateY( 180deg );
}

dabblet.html

<div class="container">
	<div class="card">
		<figure class="front">Punkt 1</figure>
		<figure class="back">Oh!!</figure>
	</div>
</div>


<div class="container">
	<div class="card">
		<figure class="front">Punkt 2</figure>
		<figure class="back">Oh!!</figure>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}