A sneak peak of what I’m working on here at work. I’m having to animate everything but as you can see this has rotations, which are always fun to try and implement into older browsers.
Luckily I found some great plugins for jQuery that make the job a lot easier.
// Go Crazydd
matrix: [1, 0, 0, 1, 0, 0], //applies a matrix
reflect: true, //same as rotate(180deg)
reflectX: true, //mirrored upside down
reflectXY: true, //same as reflectX + rotate(-90deg)
reflectY: true, //mirrored
rotate: '45deg', //rotates 45 degrees
skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
skewX: '10deg', //skews 10 degrees on the x axis
skewY: '10deg', //skews 10 degrees on the y axis
scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
scaleX: 1.5, //scales by 1.5 on the x axis
scaleY: 1.5, //scales by 1.5 on the y axis
translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
translateX: '20px', //moves the transformation 20px on the x axis
translateY: '20px', //moves the transformation 20px on the y axis
origin: ['20%', '20%'] //changes the transformation origin
When animating things its always nice to have more easing options that the standard ‘linear’ or ‘swing’. jQuery Easing gives you around 32 extra easing’s to make your job easier. It also allows you to setup your own custom easings.