This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
""" skew(<angle> [, <angle>]) specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis). """ http://dev.w3.org/csswg/css3-3d-transforms/#transform-functions The link only says what skews mean along the X or Y axis separately, not together. The intent seems to be that skew(x, y) is [1, tan(x), tan(y), 1, 0, 0], but this needs to be spelled out. In particular, skew(x, y) is not the composition of skewX(x) and skewY(y), which would have been my first guess (they don't even commute).
It looks like skew() got left out of the new spec entirely. It should be re-added to the 2D Transformation Functions section -- all browsers support it interoperably.
Checking in Overview.html; /sources/public/csswg/css3-transforms/Overview.html,v <-- Overview.html new revision: 1.18; previous revision: 1.17 done Checking in Transforms.src.html; /sources/public/csswg/css3-transforms/Transforms.src.html,v <-- Transforms.src.html new revision: 1.21; previous revision: 1.20 done
The new definition appears to be """ specifies a skew transformation along the X axis by the angle specified in the first parameter, and a skew transformation along the Y axis by the angle specified in the second parameter. If the second parameter is not provided, it has a value of 0. """ (I wasn't able to see it at <http://dev.w3.org/csswg/css3-transforms/>, but I got it from CVS.) This does not match what browsers do, as far as I can tell. For instance, skew(45deg, 45deg) results in a matrix of [1, 1, 1, 1, 0, 0], which does not correspond to any combination of skewX() and skewY() -- it's singular, while skewX() and skewY() are never singular (and therefore neither is their composition). You should define it directly in terms of a matrix, as I say in comment #0: skew(x, y) is [1, tan(y), tan(x), 1, 0, 0]. (I had tan(y) and tan(x) reversed in comment #0, but I just checked my tests and what I write in this comment is correct.) I should also reiterate that skewX() and skewY() don't commute, so defining skew() as their composition without specifying an order wouldn't even make sense. Example of skew() not agreeing with skewX() skewY() not agreeing with skewY() skewX(): data:text/html,<!doctype html> <div style="background:blue;height:100px;width:100px; transform:skew(45deg,45deg)"></div> <div style="background:green;height:100px;width:100px; transform:skewX(45deg) skewY(45deg)"></div> <div style="background:orange;height:100px;width:100px; transform:skewY(45deg) skewX(45deg)"></div> Notice how the first box disappears entirely (the transform is singular), and the second two boxes are transformed differently (skewX() and skewY() don't commute).
Fixed. The new text is at http://dev.w3.org/csswg/css3-transforms/ (which works just fine for me).
Looks good to me. It seems I needed to do a hard refresh -- the page is served with unwarranted caching headers (Cache-Control: max-age=172800).
Hello Aryeh. I linked skew, skewX and skewY to the new mathematical description section. Can you verify that the math is correct please?
Yep, the new definition is good. Thanks!