css 3d transform

_.md

[ Launch: css 3d transform ] 5432206 by enjalot

config.json

{"description":"css 3d transform","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sample.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sample.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/IUiHd8Q.png"}

inlet.js

//mustache from http://thenounproject.com/noun/mustache/#icon-No3189

var display = d3.select("#display");
var svg = display.select("svg");

display.on("mousedown", flip)
display.on("mouseup", flip)
function flip() {
  svg.classed("flip", !svg.classed("flip"))
}

sample.html

<svg width=100 height=100 class="mustache">
<path d="M93.301,3.903c-4.633,0.479-5.887,6.338-6.108,7.648c0.528-1.366,5.718-3.849,6.726-0.991   c1.081,3.058-0.853,7.377-7.869,6.837c-7.018-0.54-9.447-6.836-18.083-13.674c-8.637-6.837-18.173,0-18.173,0s-9.4-6.837-18.037,0   c-8.637,6.837-10.999,13.134-18.014,13.674c-7.018,0.54-8.918-3.779-7.839-6.837c1.009-2.859,6.217-0.374,6.746,0.992   c-0.222-1.306-1.467-7.169-6.102-7.648C1.329,3.363,0.13,9.255,0.13,12.134c0,2.878,0.686,15.157,21.736,15.157   s27.927-13.303,27.927-13.303s7.009,13.303,28.061,13.303c21.05,0,21.868-12.279,21.868-15.157   C99.722,9.255,98.518,3.363,93.301,3.903z"></path>
</svg>

style.css

svg {
  float: left;
  margin: 20px;
  position: relative;
  font-size: .8em;
  
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
svg {
  float: none;
  position: absolute;
  top: 20;
  left: 0;
  z-index: 900;
  /*border: 1px solid #ccc;
  background: #6b7077;*/
  text-align: center;

  /*
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
  box-shadow: 0 1px 5px rgba(0,0,0,0.9);
  */

  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;

  -moz-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;

  /* -- transition is the magic sauce for animation -- */
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.flip {
  z-index: 900;
  //border-color: #eee;
  //background: #333;

  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(180deg);
  
  /*
  -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
  box-shadow: 0 15px 50px rgba(0,0,0,0.2);
  */
}