Comments on: css transforms: styling the web in two dimensions http://hacks.mozilla.org/2009/07/css-transforms/ hacks.mozilla.org Fri, 10 Feb 2012 00:05:32 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Sjoerd Visscher http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-2236 Sjoerd Visscher Wed, 22 Jul 2009 11:23:04 +0000 http://hacks.mozilla.org/?p=1365#comment-2236 The transformed text looks way better in Chrome than in Firefox. Chrome doesn't have the issues Jim B talks about. The transformed text looks way better in Chrome than in Firefox. Chrome doesn’t have the issues Jim B talks about.

]]> By: Eric Shepherd http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-2045 Eric Shepherd Fri, 17 Jul 2009 18:51:33 +0000 http://hacks.mozilla.org/?p=1365#comment-2045 I've updated the sample on my web site to work in WebKit based browsers. The differences are pretty minor; instead of text1.style.MozTransform = "skewx(" + text1SkewAngle + "deg)"; I just do text1.style.MozTransform = "skewx(" + text1SkewAngle + "deg)"; text1.style.WebkitTransform = "skewx(" + text1SkewAngle + "deg)"; I’ve updated the sample on my web site to work in WebKit based browsers. The differences are pretty minor; instead of

text1.style.MozTransform = “skewx(” + text1SkewAngle + “deg)”;

I just do

text1.style.MozTransform = “skewx(” + text1SkewAngle + “deg)”;
text1.style.WebkitTransform = “skewx(” + text1SkewAngle + “deg)”;

]]> By: Eric Shepherd http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-1999 Eric Shepherd Thu, 16 Jul 2009 21:55:09 +0000 http://hacks.mozilla.org/?p=1365#comment-1999 Sorry about that with the webkit compatibility; I'll fix the demo tomorrow when I have a few minutes to update it. Just slipped through the cracks. Sorry about that with the webkit compatibility; I’ll fix the demo tomorrow when I have a few minutes to update it. Just slipped through the cracks.

]]> By: nemo http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-1937 nemo Wed, 15 Jul 2009 15:31:26 +0000 http://hacks.mozilla.org/?p=1365#comment-1937 Oh. And the scrollbar doesn't have that odd behaviour in Safari. Oh. And the scrollbar doesn’t have that odd behaviour in Safari.

]]> By: nemo http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-1933 nemo Wed, 15 Jul 2009 13:01:18 +0000 http://hacks.mozilla.org/?p=1365#comment-1933 http://m8y.org/tmp/www.bitstampede.com/demos/css-transforms/ This is a fix of his demo to support Webkit. http://m8y.org/tmp/www.bitstampede.com/demos/css-transforms/

This is a fix of his demo to support Webkit.

]]> By: Ken Arnold http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-1897 Ken Arnold Tue, 14 Jul 2009 15:09:19 +0000 http://hacks.mozilla.org/?p=1365#comment-1897 Still playing with this page using Firebug... If you rotate an element like the `div.code` or `pre` elements in this article, the height of the enclosing element (the `div.wp_syntax` with scrollbars) doesn't change, and the rotated text gets cut off. Can anyone explain why that happens and how to get the bounding box to superscribe the transformed element? Still playing with this page using Firebug… If you rotate an element like the `div.code` or `pre` elements in this article, the height of the enclosing element (the `div.wp_syntax` with scrollbars) doesn’t change, and the rotated text gets cut off. Can anyone explain why that happens and how to get the bounding box to superscribe the transformed element?

]]> By: Ken Arnold http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-1862 Ken Arnold Mon, 13 Jul 2009 22:48:23 +0000 http://hacks.mozilla.org/?p=1365#comment-1862 Was just playing with this a bit, trying to find a productive use for the skew transform. Well I don't know if this counts, but: open up Firebug, and inspect one of the .wp_syntax elements. Add `-moz-transform: skewx(-3deg)` to the .wp_syntax style (right pane), and `-moz-transform: skewx(3deg)` to `.wp_syntax pre`'s styles (two elements down). Combined with a little -moz-border-radius, it might be a nice effect for making text stand out. Or it might just make you feel like your monitor is tilted. Your call. Was just playing with this a bit, trying to find a productive use for the skew transform. Well I don’t know if this counts, but: open up Firebug, and inspect one of the .wp_syntax elements. Add `-moz-transform: skewx(-3deg)` to the .wp_syntax style (right pane), and `-moz-transform: skewx(3deg)` to `.wp_syntax pre`’s styles (two elements down).

Combined with a little -moz-border-radius, it might be a nice effect for making text stand out. Or it might just make you feel like your monitor is tilted. Your call.

]]> By: Jim B http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-1857 Jim B Mon, 13 Jul 2009 19:40:17 +0000 http://hacks.mozilla.org/?p=1365#comment-1857 Wow, that text looks terrible. Ideally the text would look rigid during translation/rotation/scaling, but the character spacing hops all over the place. It seems like there is some quantization going on that is independent of the eventual display resolution/orientation. Perhaps font hinting is done assuming some default size/offset/rotation, then the transformation is applied, resulting in the ratcheting. Wow, that text looks terrible. Ideally the text would look rigid during translation/rotation/scaling, but the character spacing hops all over the place. It seems like there is some quantization going on that is independent of the eventual display resolution/orientation.

Perhaps font hinting is done assuming some default size/offset/rotation, then the transformation is applied, resulting in the ratcheting.

]]> By: Anonymous http://hacks.mozilla.org/2009/07/css-transforms/comment-page-1/#comment-1856 Anonymous Mon, 13 Jul 2009 19:15:21 +0000 http://hacks.mozilla.org/?p=1365#comment-1856 As far as I can tell, these transforms don't actually put any content past the right edge of the screen, so why do they produce a widened document and corresponding horizontal scrollbar? As far as I can tell, these transforms don’t actually put any content past the right edge of the screen, so why do they produce a widened document and corresponding horizontal scrollbar?

]]>