css transform transition

_.md

[ Launch: css transform transition ] 5799677 by enjalot

config.json

{"description":"css transform transition","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"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}},"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/KZmMyw2.png"}

inlet.js

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

var layer = display.append("div")
.text("HIII")

layer
.transition()
.duration(1000)
.styleTween("-webkit-transform", transformTween("scale(1.0) translate3d(0px, 0px, 0px)", "scale(0.5) translate3d(0px, 0px, 100px)"))

function transformTween(from, to) {
  return function(d,i,a) {
    var int = d3.interpolateString(from, to)
    return function(t) { return int(t) }
  }
}