Rotate a block element

90 degrees, 180 degrees, 270 degrees

[coopster]

I know that IE has a writingMode property which almost describes what I am attempting to do. Then, I see CSS3 has rotation, which looks even closer to what I would like to do. However, I am still at a loss and want to find out from the community, is there a way to flip or rotate a block element like a table? For example:

/* initial */ 
+---+---+---+ 
¦ A ¦ B ¦ C ¦ 
¦ D ¦ E ¦ F ¦ 
¦ G ¦ H ¦ I ¦ 
+---+---+---+ 
/* rotated 90 */ 
+---+---+---+ 
¦ G ¦ D ¦ A ¦ 
¦ H ¦ E ¦ B ¦ 
¦ I ¦ F ¦ C ¦ 
+---+---+---+ 
/* rotated 180 */ 
+---+---+---+ 
¦ I ¦ H ¦ G ¦ 
¦ F ¦ E ¦ D ¦ 
¦ C ¦ B ¦ A ¦ 
+---+---+---+ 
/* rotated 270 */ 
+---+---+---+ 
¦ C ¦ F ¦ I ¦ 
¦ B ¦ E ¦ H ¦ 
¦ A ¦ D ¦ G ¦ 
+---+---+---+

[londrum]

CSS won't be able to help you with that because you'd have to rewrite the underlying HTML first -- the individual cells are changing rows.

the only way you might be able to do it is this... if all the cells are the same size, then you could give each one a different ID, and then position them with position:absolute. then it wouldn't matter which row they were in.

[coopster]

because you'd have to rewrite the underlying HTML first

Yeah, I already did that. I guess I was just hoping/wishing for some type of element rotation, kind of like rotating an image except in this case a block element where the inline elements would "stay in place" during the rotation.

Wishful thinking, I guess :)
Thanks, londrum.

[Demaestro]

You could do it with a table and mapping the cells as quadrants. Then moving the content to the cells.

+---+---+---+
¦ A1 ¦ A2 ¦ A3 ¦
¦ B1 ¦ B2 ¦ B3 ¦
¦ C1 ¦ C2 ¦ C3 ¦
+---+---+---+

So if you rotate 90 degrees

A1 content = C1 content
A2 content = B1 content

and so on....

If you have it mapped out as to which cells get moved to where you should be able to pull it off.

[ergophobe]

If
- it's not a true table, but is a collection of divs that look like a table
- the data elements have known height and width, like image thumbnails

Then, you could change out the stylesheet using javascript. Each stylesheet would specify a width for the containing div, then all the other divs would have known height and width.

Each stylesheet would have different settings on the "top" and "left" properties depending on where you wanted the items to go.

Note that if the divs in Demaestro's post were defined as

<div class="A 1">thumb</div>
etc

The "1" col becomes your new top row when turned 90 degrees.

Let's say in all cases
div A, div B, div C {width:50px; height:100px;}

So as drawn it would be something like

div.A {top:0;}
div.B {top:101;}
div.1 {left:0;}
div.2 {left:51;}
etc

If you use an onclick event to change out the stylesheet to rotate 90, you change that to
div.1 {top:0;}
div.2 {top:101;}
div.C {left:0;}
div.B {left:51;}

I think that woould work