you are beautiful (from codepen)

index.html

<div class="cube">
	<div class="front">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/resized.jpg"/>
	</div>
	<div class="bottom">
		you are beautiful
	</div>
</div>

style.scss

@import url(https://fonts.googleapis.com/css?family=Arimo:700);
body {
  overflow: hidden;
  padding-top: 2em;
 background: url("http://enjoycss.com/bg-img/default/3_6.png");
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-perspective: 1500px;
          perspective: 1500px;
}

.cube {
  width: 300px;
  height: 350px;
  margin: 0 auto;
  font-family: 'Arimo', sans-serif;
  font-size: 32px;
  line-height: 100px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #f8f8f8;
  -webkit-transition: -webkit-transform .5s;
          transition: transform .5s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.cube:hover {
  -webkit-transform: rotatey(180deg);
          transform: rotatey(180deg);
}

.front, .bottom {
  height: 100px;
}

.front {
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
}

.bottom {
	display: block;
  position: absolute;
  width: 100%;
  height: 200px;
  backface-visibility: hidden;
  -webkit-transform: rotatey(-180deg) translateZ(250px);
          transform: rotatey(-180deg) translateZ(250px);
}

you-are-beautiful.markdown

you are beautiful

i've been working today on some css transforms and i happen to have your pic around

A Pen by rafszul on CodePen.

License.