CSS Transform Origin

by Ali Dadmand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<img class="hammer" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5" />

CSS

img.zoomEffect_br {
    /*transform: rotate(25deg);
    transition: all 0.5s ease-in-out 0s;
    transform-origin: bottom right;*/
    
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}



@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

JavaScript

var hammer = $('.hammer'),
    hammerTl = new TimelineMax({repeat:-1,paused:true});
hammerTl.to(hammer,0.15,{
  rotation:-30,transformOrigin:"right bottom",
  bezier:{
    type:"soft",
    values:[{x:0,y:0},{x:0,y:-2},{x:0,y:-3},{x:0,y:-6},{x:0,y:-10}],
    autorotate:true},ease: Expo.easeIn
})
.to(hammer,0.15,{
  rotation:-40,transformOrigin:"right bottom",
  bezier:{
    type:"soft",
    values:[{x:0,y:-15},{x:0,y:-15}],
    autorotate:true
  },ease: Power4.easeOut
})
.to(hammer,0.6,{rotation:0,transformOrigin:"right bottom",
             bezier:{
    type:"soft",
    values:[{x:0,y:-3},{x:0,y:-2},{x:0,y:-1},{x:0,y:0}],
    autorotate:true}})
// Trigger animation on hover     
hammerTl.play();