Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created April 22, 2013 03:12
Show Gist options
  • Save enjalot/5432206 to your computer and use it in GitHub Desktop.
Save enjalot/5432206 to your computer and use it in GitHub Desktop.
css 3d transform
{"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"}
//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"))
}
<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>
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);
*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment