CSS поворот.

Поворот элемента, используя только CSS, поддерживают уже многие браузеры:

1. Matrix Filter (Internet Explorer)
2. -webkit-transform (Safari | Chrome)
3. -moz-transform (Firefox)
4. -o-transform (Opera)

span.smile.right {
-webkit-transform: rotate(-90deg); /* Chrome y Safari */
-moz-transform: rotate(-90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
-o-transform: rotate(-90deg); /* Opera */
display: inline-block; padding-left: 8px; vertical-align: text-top; text-indent: 0px;}

И добавим теперь на веб-страницу:

<span class="smile right">(:</span>

Что мы видим: (: перемещается в горизонтальное положение(:
Здорово, не так ли? -90deg означает поворот на 90%. У IE свои значения.

.povorot45 {
  -moz-transform: rotate(45deg);  /* Firefox */
  -o-transform: rotate(45deg);  /* Opera */
  -webkit-transform: rotate(45deg);  /* Safari y Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="povorot45"> ....... </div>

Для поворота в обратную сторону задаём
отрицательные значения:

.povorot45 {
  -moz-transform: rotate(-45deg);  /* Firefox */
  -o-transform: rotate(-45deg);  /* Opera */
  -webkit-transform: rotate(-45deg);  /* Safari y Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476); /* IE */
}

Для горизонтального вращения:

.povorotG { /* любые значения */ }
.povorotG:hover {
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: FlipH; /* Internet Explorer */
}

Для вертикального вращения:

.povorotV { /* любые значения */ }
.povorotV:hover {
-moz-transform: scaleY(-1); /* Firefox */
-o-transform: scaleY(-1); /* Opera */
-webkit-transform: scaleY(-1); /* Chrome y Safari */
transform: scaleY(-1); /* w3org */
filter: FlipV; /* Internet Explorer */
}

Теперь в необходимом месте на HTML-странице для изо указываем:

<img class="povorotG" src="адрес_изображения" />

Либо для блока:

<div class="povorotG"> Гори, печурка, — круче пирог! </div>

Аналогично с povorotV.