Ben's Sandbox
  • Projects
  • Tags

CSS3 Transforms using Sylvester Matices and jQuery


View Blog   View Source  
This example illustrates how to use jQuery with the matrix representation of the CSS transform style. Several transforms are setup and Sylvester is used to represent the matrices and do the math. One problem with additive rotations is "gimble lock". If you attempt to rotate the div by 10 degrees over and over again, it will get stuck just shy of 90 degrees. This behavior is not exactly consistent, you can skew it slightly and then it will unlock and rotate again. A more detailed explanation is available on my blog.


Angle: Distance: Size: Angle:
 
transform me

© Ben Olson 2012 with help from Jekyll Bootstrap and Twitter Bootstrap