Фильтр по:
  

Как повернуть изображение на 90 градусов в информере?

Как сделать...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как повернуть изображение на 90 градусов в информере? (CSS3 поворот объекта, кроссбраузерно.)
Как повернуть изображение на 90 градусов в информере?
Дата: Воскресенье, 08.01.2012, 10:41 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Q: Как повернуть изображение на 90 градусов в информере?




Quote (aliman22)
а как сделать так что бы фото на Информере были в горизонтальном положении?
Code
<div align="center"><a href="$PHOTO_URL$">$PHOTO$</a></div><div align="center" style="padding-top:3px;padding-bottom:5px;font:7pt">[<a href="$CAT_URL$">$CAT_NAME$</a>]</div>

 
Дата: Воскресенье, 08.01.2012, 11:18 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 С помощью CSS3 свойства «transform» + Хак для IE в виде фильтра или скрипта.
Например (transform + filter):
Стили:
Code
<style type="text/css">
.transform img{
-moz-transform: rotate(90deg); /*Firefox */
-webkit-transform: rotate(90deg); /* Safari Chrome */
-o-transform: rotate(90deg); /* Opera */
transform: rotate(90deg); /* CSS3 */
-ms-transform: rotate(90eg); /* IE9 */
-ms-filter:'progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17,M12=-1,M21=1,M22=6.123031769111886e-17, SizingMethod="auto expand", enabled=true)'; /* IE8+ */
}
*+html .transform img{
filter:progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17,M12=-1,M21=1,M22=6.123031769111886e-17, SizingMethod='auto expand', enabled=true);
} /* IE7 */
</style>


HTML:
Code
<div align="center" class="transform">
<a href="/_example/_img/_anime/_01_800x600.jpg"><img class="transform" src="/_example/_img/_anime/_01_800x600.jpg" width="800" height="600" alt="" /></a>
</div>


☑ Пример (transform + filter)
...

Или, transform + JavaScript:

Стили (те же):
Code
<style type="text/css">
.transform img{
-moz-transform: rotate(90deg); /*Firefox */
-webkit-transform: rotate(90deg); /* Safari Chrome */
-o-transform: rotate(90deg); /* Opera */
-ms-transform: rotate(90eg); /* IE9 */
transform: rotate(90deg); /* CSS3 */
}
</style>


JavaScript:
Code
<script type="text/javascript">
function transform(obj,grad){
var deg2radians=Math.PI*2/360,deg=grad,rad=deg*deg2radians,costheta=Math.cos(rad),sintheta=Math.sin(rad);
obj.style.filter='progid:DXImageTransform.Microsoft.Matrix(M11='+costheta+',M12='+(-1)*sintheta+',M21='+sintheta+',M22='+costheta+', SizingMethod="auto expand", enabled=true)';
};
if(/msie 6.0|msie 7.0/i.test(navigator.userAgent.toLowerCase())){
       window.onload=function(){transform(document.getElementById('rotateImg'),90);};       
};
</script>

Где:
transform(document.getElementById('rotateImg'),90); - вызов функции поворота и передача в неё параметров:
document.getElementById('rotateImg') - объекта, и
90 - угла поворота.

HTML:
Code
<div align="center" class="transform">
<a href="/_example/_img/_anime/_01_800x600.jpg"><img id="rotateImg" class="transform" src="/_example/_img/_anime/_01_800x600.jpg" width="800" height="600" alt="" /></a>
</div>
<div align="center" style="padding-top:3px;padding-bottom:5px;font:7pt">[<a href="$CAT_URL$">$CAT_NAME$</a>]</div>


☑ Пример (transform + JavaScript + window.onload)

Или (img onload):
HTML:
Code
<div align="center" class="transform">
<a href="/_example/_img/_anime/_01_800x600.jpg"><img onload="transform(this,90)" id="rotateImg" class="transform" src="/_example/_img/_anime/_01_800x600.jpg" width="800" height="600" alt="" /></a>
</div>


☑ Пример (transform + JavaScript +img.onload)[/b] ...
...

 
Дата: Воскресенье, 08.01.2012, 12:07 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Тоже самое, но с классами:

JavaScript:
Code
function transform(clss,grad){
var deg2radians=Math.PI*2/360,deg=grad,rad=deg*deg2radians,costheta=Math.cos(rad),sintheta=Math.sin(rad);
var els=document.getElementsByTagName('img');
for(i=0,j=els.length;i<j;i++){
    if(els[i].className.match('\\b'+clss+'\\b')){
     els[i].style.filter='progid:DXImageTransform.Microsoft.Matrix(M11='+costheta+',M12='+(-1)*sintheta+',M21='+sintheta+',M22='+costheta+', SizingMethod="auto expand", enabled=true)';
     };
    };
};
if(/msie 6.0|msie 7.0|msie 8.0/i.test(navigator.userAgent.toLowerCase())){
    window.onload=function(){transform('transform',75);    };    
};


CSS:
Code
.transform{
-moz-transform: rotate(90deg); /*Firefox */
-webkit-transform: rotate(90deg); /* Safari Chrome */
-o-transform: rotate(90deg); /* Opera */
-ms-transform: rotate(90eg); /* IE9 */
transform: rotate(90deg); /* CSS3 */
}


HTML:
Code
<div align="center">
<a href="/_example/_img/_anime/_01_800x600.jpg"><img class="transform" src="/_example/_img/_anime/_01_800x600.jpg" width="800" height="600" alt="" /></a>
</div>


☑ Пример (transform + JavaScript + window.onload + element.class) ...
...
...

Добавлено (09.1.2012, 6:28:13)
---------------------------------------------


Блин, это “зараза” даже в шестом работает ... Не ожидал )))
Прикрепления: 0966222.png (63.3 Kb)

 
Дата: Пятница, 08.02.2013, 18:58 |
Сержант
Группа: Проверенные
Сообщений: 31
Награды: 0
Репутация: 0
Статус: Offline


 А можно ли таким же способом повернуть флэш?

 
Дата: Пятница, 08.02.2013, 19:54 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 vospa,
Цитата (vospa, Пт, 08.02.2013, 18:58:26)
А можно ли таким же способом повернуть флэш?

Можно

 
Дата: Суббота, 09.02.2013, 04:59 |
Сержант
Группа: Проверенные
Сообщений: 31
Награды: 0
Репутация: 0
Статус: Offline


 Нет, никак... sad
Картинки по Вашим примерам поворачивает на раз два. Не хотел в очередной раз беспокоить, но ухлопал пол ночи и так ничего и не вышло с поворотом флэша. Есть код:

Код
<object type="application/x-shockwave-flash" data="/fire.swf" width="160" height="110">
<param name="bgcolor" value="#ffffff" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="movie" value="" />
<param name="flashvars" value="st=;file=" /></object>


Как ни пытался я его подставить в Ваши примеры, ничего не получается. Ткните носом бестолкового, пожалуйста.

 
Дата: Суббота, 09.02.2013, 11:34 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 vospa,
Цитата (vospa, Сб, 09.02.2013, 04:59:23)
Картинки по Вашим примерам поворачивает на раз два. Не хотел в очередной раз беспокоить, но ухлопал пол ночи и так ничего и не вышло с поворотом флэша. Есть код ... Как ни пытался я его подставить в Ваши примеры, ничего не получается.

А как вы пытались? Где стили под этот код?
У меня все поворачивается:



» http://likbezz.ru/_content/_css/transform/transform_2_object.html
Прикрепления: 4104005.png (30.7 Kb)

 
Дата: Понедельник, 18.02.2013, 14:18 |
Сержант
Группа: Проверенные
Сообщений: 31
Награды: 0
Репутация: 0
Статус: Offline


 Я идиот... Я все правильно делал, за исключением... Посмотрел код страницы в Вашем примере и понял. Вместо того, чтобы изменить на .transform object, я оставлял точно, как в примере для картинки .transform img.
Большое спасибо, все заработало smile

Добавлено (18.02.2013, 14:18)
---------------------------------------------
Уменя еще вопрос, наверное не совсем по теме, но как продолжение предыдущего моего вопроса. Все сделал, как у Вас, все работает, все довольны. За исключением одной небольшой, а может, и большой, проблемки. Вставил я на сайт 2 маленькие флэшки. Точнее, одну и ее зеркальное отображение. Они представляют собой струю пламени. Ну я и решил, что как нельзя лучше подходят, чтобы прикрутить их к пастям драконов.
А проблема вот в чем. Одна флэшка в самом верху левого блока, а ее зеркальное отображение вверху правого. И довольно часто левая флэшка плохо прогружается при обновлении страницы. То есть, она грузится, но остается на черном непрозрачном фоне.
Можно ли что-то с этим сделать, или проще вообще отказаться от них? Если нужно, могу привести код, или ссылку на страницу

Сообщение отредактировал vospa - Суббота, 09.02.2013, 13:13
 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как повернуть изображение на 90 градусов в информере? (CSS3 поворот объекта, кроссбраузерно.)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия