2

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

enter image description here

3 Answers3

4

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.

AfromanJ
  • 3,922
  • 3
  • 17
  • 33
0

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

dersvenhesse
  • 6,276
  • 2
  • 32
  • 53
0
 -moz-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
Atif Azad
  • 697
  • 2
  • 9
  • 21