css - CSS3 2D Transform Module: multiple functions: order of function application in noncommutative case -
in section 2-dimensional transforms book "css animations , transitions modern web" adobe press states:
you can nest transforms many levels deep want. result applies first transformation, applies sec transformation, third, , on.
what wanted know, not clear book, whether functions in function list composed (i.e. applied object transformed) in left-to-right or right-to-left fashion.
thanks.
the functions in function list applied right-to-left.
this can seen looking @ browser output next code snippet set together:
i wanted investigate whether listed functions composed right-to-left or left-to-right, tested things out next page:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>example code</title> <meta name="description" content="example code" /> <meta name="author" content="john doe" /> <style type="text/css"> * { border: 0; margin: 0; padding: 0; } #container { width: 200px; height: 400px; background-color: purple; } .box { padding: 50px; width: 100px; height: 100px; background-clip: content-box; background-color: yellow; transform-origin: 50px 50px; } .box.one:hover { transform: translatex(100px) skewy(30deg); } .box.two:hover { transform: skewy(30deg) translatex(100px); } </style> </head> <body> <div id="container"> <div class="box one"> hello </div> <div class="box two"> world </div> </div> </body> </html> in these case translatex , skewy transformations not commute (i.e. order matters). found, , info seems lacking in book, derive transformed picture, first need apply transformation on right (e.g. skewy box one) , apply each transformation left in turn (e.g. translatex box one). in each case operation computed respect origin have set upper left hand corner of yellowish rectangle.
what found order of application of transformations in transformation list consistent found on css3 spec (and other computer graphics systems such opengl/webgl):
http://www.w3.org/tr/css3-transforms/#propdef-transform
the final transformation value coordinate scheme obtained converting each function in list corresponding matrix defined in mathematical description of transform functions, multiplying matrices.
css css3 matrix transform transformation
No comments:
Post a Comment