Forums
View unanswered posts | View active topics It is currently Sun Nov 23, 2014 11:10 am



Reply to topic  [ 9 posts ] 
 Suggestion: CSS element rotation 
Author Message

Joined: Mon Jul 19, 2010 4:46 am
Posts: 34
Post Suggestion: CSS element rotation
Hi.

Just wanted to suggest a feature for a future version: CSS transform.

I've got the following in a stylesheet to rotate an element by 45 degrees (for one of those trendy corner-ribbons).

Code:
  transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
  filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */


It works in all browsers, but has some issues...
  • It needs both the filter (for IE6/7) and -ms-filter (for IE8) styles.
  • The IE6/7 filter style cannot be enclosed in quotes, but contains characters that break subsequent CSS in other browsers, so it has to be the last declaration in a given stylesheet.
  • The MS filter transformation method is much more complex (virtually unreadable) than the CSS3 method.
  • There are some differences in how the element is positioned both between IE and other browsers and also between IE versions (especially IE6, though fortunately I don't have to support IE6! yay!).
It would be much nicer if we could do this with a CSS PIE call instead, and have the quirks ironed out at the same time.

Thanks again for such a great tool.

All the best,



Spudley.


Mon Jul 19, 2010 9:11 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Suggestion: CSS element rotation
Thanks for the suggestion! I'd definitely like to try tackling 2d transforms at some point. Probably post-1.0 though.


Mon Jul 19, 2010 11:36 am
Profile

Joined: Thu Jul 15, 2010 1:56 pm
Posts: 34
Post Re: Suggestion: CSS element rotation
Yes!! PLEASE put in transforms! At the very least, put it in for <img> elements, which is totally doable by transferring the image to VML. Then if you add rounded borders and drop shadows to that element, *GASP*. AWESOME! The designers at our web design shop would love me if I told them we could start supporting that. (Okay, I MIGHT share the credit, lol...)

:D

-Matthew


Mon Jul 19, 2010 11:44 am
Profile

Joined: Mon Jul 26, 2010 11:59 pm
Posts: 1
Post A Site providing an algorithm for the rotation matrix
http://www.boogdesign.com/examples/tran ... lator.html
it is driven from the ms docs here - http://msdn.microsoft.com/en-us/library ... 85%29.aspx
note - for best copatability, all other browsers should be set with
Code:
-{moz/webkit/o}-transform-origin:center;


to make them rotate around the center like IE


Tue Jul 27, 2010 12:02 am
Profile

Joined: Wed Nov 03, 2010 1:56 pm
Posts: 3
Post Re: Suggestion: CSS element rotation
There has not been any comments here is quite a while. I'd like to vote on this one ( 2D transforms ) as well. Is there any news on this?


Wed Nov 03, 2010 2:45 pm
Profile

Joined: Thu Jul 15, 2010 1:56 pm
Posts: 34
Post Re: Suggestion: CSS element rotation
Just to point out, we know continuous transforms (more than 90 or 45-degree increments) are possible based on the work in the Raphael library, which draws in SVG and VML. For example: http://raphaeljs.com/image-rotation.html.

2D Transforms would be absolutely brilliant in PIE. How can we help make this happen?


Mon Jan 17, 2011 12:40 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Suggestion: CSS element rotation
There has actually been some work done on this already, with collaboration from community members Zoltan Dulac (of cssSandpaper) and Hannes Papenberg. There's a whole lot of work left to do to get this right though.

The basic plan is to use IE's matrix filter to transform the target element (this is tricky as it requires wrapping elements and offset positioning to prevent the transform from clipping or expanding the element). The matrix filter is a poor solution for PIE's VML (it causes all transparent pixels to go opaque which would completely destroy box-shadow) so I've been experimenting with the VML 'skew' element which allows a matrix transformation of the shapes' paths while maintaining transparency (I learned about that recently from Dmitry of RaphaelJS.) Combining the two, plus some complicated matrix calculations, should eventually result in a pretty decent approximation of CSS3 2D transforms.

Unfortunately I don't have an ETA for when this will be finished. I for one am very busy with other work and will have very little time to work on this until at least the end of February.


Mon Jan 17, 2011 4:02 pm
Profile

Joined: Wed Nov 03, 2010 1:56 pm
Posts: 3
Post Re: Suggestion: CSS element rotation
I've seen that IE9 suggests that it does support 2D transforms utilizing the -ms- prefix although in my tests it remains to be seen a working example.


Mon Jan 17, 2011 4:07 pm
Profile

Joined: Thu Mar 31, 2011 11:44 am
Posts: 8
Post Re: Suggestion: CSS element rotation
bump!

Sorry if I'm being an idiot but is it not just a case of adding the appropiate ms-filter to the style of the element when the webkit statement for rotation is found? (I've made that sound all very easy). Is there even a standard been set for rotation yet in css3?

Thanks


Wed Apr 06, 2011 9:07 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 9 posts ] 

Who is online

Users browsing this forum: Yahoo [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.