CSSAnimation Playground

Transform and Translate with native JavaScript.

by rpflorence

HTML

<script src="https://github.com/rpflorence/CSSAnimation/raw/develop/Source/CSSAnimation.js"></script>
<p><a href="http://ryanflorence.com/cssanimation/" target="_top">View the CSSAnimation website</a></p>
<button id=go>go</button>

<div id=camera>
    <div id=transform-me>Transform me</div>
</div>

CSS

#camera {
    -webkit-perspective: 500;
    /* blink bug */
    -webkit-transform: translate3d(0,0,0);
}

#transform-me {
    margin: auto;
    margin-top: 50px;
    width: 120px;
    height: 120px;
    background: #ccc;
    line-height: 100px;
    text-align: center;
}

JavaScript

var el = document.getElementById('transform-me'),
    go = document.getElementById('go'),
    transition = new Transition(el),
    transform = new Transform(el);

transition.set({
    property: 'transform',
    duration: '1s',
    'timing-function': 'ease-out'
});

go.addEventListener('click', function(){
    // uncomment the effects you want to see

    transform
        .rotate({ x: 180, y: 180, z: 360 })
        .scale(2)
        //.skew({x: 20, y: 20})
        //.translate({x: 100, y: 100})

    setTimeout(function(){
        transform.set('');
    }, 1000);

});