Fancy CSS3 Transforms and Transitions

by Rob McBroom

This is more of a test to see how Mango does with embedded HTML, but here's an example of a 3D flip-over effect that requires very little code in a modern browser.

I only included the -webkit properties. You'd obviously include others if you were doing this "for real".

Click the picture.

Some random picture of Morgan Lander

The Code


#scene {
  -webkit-perspective: 900;
  perspective: 900;
  height: 470px;
.card {
  font-size: x-large;
  -webkit-transform: rotateY(15deg);
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 2s;
  border-radius: 0.4em;
  vertical-align: middle;
.flipped {
  -webkit-transform: rotateY(165deg);
.face {
  border-radius: 0.4em;
  position: absolute;
  margin: 1em auto;
  top: 0em;
  left: 0em;
  right: 0em;
  width: 240px;
  height: 330px;
  background: #000;
  color: #FFFFFF;
  font-family: "Liberation Serif";
  font-size: x-large;
  text-align: center;
  padding: 0.4em;
  -webkit-box-reflect: below 3px
                       -webkit-gradient(linear, left top, left bottom,
                         color-stop(0.6, transparent),
.front {
  -webkit-transform: translateZ(0.5em);
.back {
  -webkit-transform: translateZ(-0.5em) rotateY(180deg);
  opacity: 0.85;


function flipOver(theCard) {
  if (theCard.className == "card flipped") {
    theCard.className = "card";
  } else {
    theCard.className = "card flipped";

(All it does is change the class attributes. This effect could also be triggered without JavaScript using :hover, media queries, etc.)


<div id="scene">
  <div class="card" onClick="javascript:flipOver(this)">
    <div class="front face">
      <img src="/tests/Morgan.jpeg" width="240">
    <div class="back face">
      <p>Some random picture of Morgan Lander</p>
</div> <!-- end scene -->
blog comments powered by Disqus