Rotate a block element

Question

Is it possible to rotate a block-level box, generated by block element relative to this geometrical center. E.g. as follow:

Answer 1

You can use CSS transform:

transform: rotate(-200deg);
-ms-transform: rotate(-200deg); /* IE 9 */
-webkit-transform: rotate(-200deg); /* Safari and Chrome */

Demo

The transform property is supported in Internet Explorer 10, Firefox, and Opera. You do not need to use CSS prefixes for these.

Answer 2

The property transform in CSS3 does this. You need to use vendor prefixes for some browsers. Here is an example: http://jsfiddle.net/gfEL5/

-moz-transform: rotate(30deg); /* FF after 3 and before 16 */
-ms-transform: rotate(30deg); /* IE 9 */
-o-transform: rotate(30deg); /* Opera after 10.5 and before 12 */
-webkit-transform: rotate(30deg); /* current Chrome, Safari, Opera */ 
transform: rotate(30deg); /* IE after 10, FF after 16 */

It rotates around the center by default, but you can set another transform-origin as well. More about this: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Answer 3

 -moz-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);