On Jan 3, 2011, at 2:32 AM, Alan Gresley wrote: > This email is about an unexpected result of rotation in transformed elements > which I noticed when resizing the viewport. What does happen as the viewport > gets wider is the start and end parts of the element that is rotated become > higher (start) or lower (end). > > This can result in the element *overlapping other content*. I have created > this demo to help with discussion for this issue. My solution is by using > media queries. Each change is by 1 degree. > > <http://css-class.com/test/css/3/rotate-media-query-avoid-overlap.htm>
I'd argue that it is expected. The elements rotates around is center point, by default. http://dev.w3.org/csswg/css3-2d-transforms/#transform-origin-property When the viewport width changes, the element grows or shrinks and may not fit within the assigned height of the parent element. (and remember, transforms do not affect layout - and the center point of the affected element doesn't change position within its containing block) You can control that: E { transform-origin: 0 0; } would have the rotation happen from the start point. It may not give you the effect you're after, though. Philippe --- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
