Friday, September 12, 2014

CSS transform AND jquery animate

-----------------------------------------------
<style>
#aa{
width:100%;
height:100%;
background: url('http://33.media.tumblr.com/f23c9636cd9fe74fa473492fa3d9f2d0/tumblr_nbru71s6AD1tlk8p6o1_500h.jpg') 0 0 no-repeat;
text-indent: 980px;
}
</style>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#aa" ).animate({
textIndent:0
}, {
duration: 5000,
step: function( now, fx ) {

$(this).css('transform','rotateX(' + now +'deg)')
$(this).css('transform', 'translate3d('+now+','+now+','+now+')');
//$(this).css('transform','rotateY(' + now +'deg)')
var data = fx.elem.id + " " + fx.prop + ": " + now;
$( "body" ).append( "<div>" + data + "</div>" );
}
});
})
</script>
<div id='aa'>

</div>