Поворот изображения

[Constantin.UK]

Решено!

[FINoM]

Интересная задача.
А чем так SVG не угодил (не считая кроссбраузерности)?

[monolithed]

Если CSS не устраивает, то можно использовать Canvas или SVG+VML.
Есть еще один вариант, это сделать отрисовку, т.е. взять первоначальное изображение, и накладывать на него другие, как-бы эмулируя поворот, но на само деле это будет одно изображение в котором будет основное и его углы поворота. все спрайтами верстается, а скрипт ставится на таймер

[Aetae]

Минимум геморроя - максимум качества картинки и кроссбраузерности - только спрайтом.
Куча геморроя, тормоза, глюки кроссбраузерноти, но высокотехнологичность и современность - svg+vml и прочие сanvas'ы))

[FINoM]

Все изначально отрисовывалось в illustrator'e, и при сохранение в .svg - из-за мелких деталей размер картинки больше 100кб

Эм... Почитай о теге <image>, в него можно запихать png.
И на всякий случай о повороте элемента: http://www.svgbasics.com/rotate.html
А вот про поворот в IE: http://habrahabr.ru/blogs/css/107183/
По VML ничего не посоветую, так как не разбираюсь.

Кстати, возможно самый безгеморройный способ решения задачи - использование библиотеки Raphael, которая совмещает в себе оба стандарта (SVG, VML).

[FINoM]

http://raphaeljs.com/reference.html#image
http://raphaeljs.com/reference.html#rotate
Во, сразу же в доках нашел.

[Aetae]

Не, спрайтами заколебаешся.) Если одна картинка то ещё ладно, а много...
Юзай тогда и вправду Raphael. В ие наверняка будут тормоза, но, какбэ, делая такое, иного ожидать не стоит.

[FINoM]

В ие наверняка будут тормоза, но, какбэ, делая такое, иного ожидать не стоит.

А с чего ему тормозить? Картинки статичные, их не много, анимация проста, тем более мелкософт явно сделал какую-то оптимизацию потребления ресурсов форматом.

[cosmos44]

Доброго времени суток всем почитателям IE.
Я случайно забрел на данную ветку решил помочь народу над головной болью – Вращение элемента в IE. Не используя трех – килограммовых jQuery . Работает естественно только в IE, так как в нем и есть головная боль.

<div id="wrap" style="position: absolute; top:100px; left:100px; border:1px solid red;">
  <div id="hndl" style="position: relative; width:400px; height:300px; filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1, sizingMethod='auto expand');">
  <a href="http://sbw.in.ua/"><strong>sbw.in.ua</strong></a>
   <div style="position: relative; filter:alpha(opacity=10); background-color: #06F; width:100%; height:100%; border:1px solid #000000;">
    <div style="position: relative; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fon.png', sizingMethod='scale'); WIDTH: 100%; HEIGHT: 100%;">
    
    </div>
   </div>
 <span style="display:none">123456789</span>
 </div>
</div>
<script type="text/javascript">
	var handler = document.getElementById('hndl');
	var wraper = document.getElementById('wrap');
	var alpha = 0;
	var betta = Math.atan2(150, 200)*180/Math.PI;
	var center = {left:100, top:100, w2:200, h2:150};

	function rotate(){
	 if (alpha >= 360)  alpha=0; else alpha= alpha+5;
	var fi = alpha +180 + betta;
	if (fi >=360) fi = fi-360;
	 var M11 = handler.filters['DXImageTransform.Microsoft.Matrix'].M11 = Math.cos(alpha*Math.PI/180);
	 var M12 = handler.filters['DXImageTransform.Microsoft.Matrix'].M12 = -Math.sin(alpha*Math.PI/180);
	 var M21 = handler.filters['DXImageTransform.Microsoft.Matrix'].M21 = Math.sin(alpha*Math.PI/180);
	 var M22 = handler.filters['DXImageTransform.Microsoft.Matrix'].M22 = Math.cos(alpha*Math.PI/180);
	 handler.filters['DXImageTransform.Microsoft.Matrix'].dx = 0;
	 handler.filters['DXImageTransform.Microsoft.Matrix'].dy = 0;
	  wraper.style.left = center.left + center.w2 - wraper.offsetWidth/2;
	  center.left = 	center.left + center.w2 - wraper.offsetWidth/2;
	  center.w2 = 	wraper.offsetWidth/2;
	  wraper.style.top = center.top + center.h2 - wraper.offsetHeight/2;
           center.top = center.top + center.h2 - wraper.offsetHeight/2;
	  center.h2 = wraper.offsetHeight/2
	window.status =  wraper.offsetWidth  +'   '+wraper.offsetHeight +' '+alpha +' fi= '+fi +' '+betta;
	window.setTimeout(rotate, 12);
	} rotate();
 </script>