created by http://livecoding.io

README.md

View this code at http://livecoding.io/5427602

options.json

{
    "libraries": [
        "Rickshaw"
    ],
    "mode": "css",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

.card {
  text-align: center;
  -webkit-transform-style: preserve-3d;
  width: 90px;
  height: 90px;
  padding: 10px;
  position: absolute;
  -webkit-transform: rotateY( 50deg );
  left: calc(50% - 45px);
  top: calc(50% - 45px);
}


.front {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #aaa;
  padding: 10px;
  -webkit-backface-visibility: hidden;
}

.back {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #aaa;
  padding: 10px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotateY( 180deg );
}

.scene {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
}

water.html

<div class="scene">
  <div class="card" id="c">
  <div class="front">I'm a fancy 3d card</div>
  <div class="back">Other side</div>
  </div>
</div>

water.js

var c = document.getElementById("c");
var r = 0;

setInterval(function() {
  r += 10;
c.style.webkitTransform = "rotateY(" + r + "deg)";
}, 20);