» » >
Эффект поворота - Rotate
19.09.2013, 16:15



Поддерживается следующими браузерами:

Mozilla Firefox ( 3.5 и выше )
Google Chrome ( 2 и выше )
Opera ( 11.0 и выше )
Apple Safari ( 4.0 и выше )

Internet Explorer в пролёте, за исключением дополнительного синтаксиса в коде.

HTML-Code

<img class="transform-1" src="http://center-dm.ucoz.ru/_nw/0/48248541.jpg">
CSS-Code

.transform-1 {
  /* Firefox */
  -moz-transform: rotate(-5deg);  
   
  /* Safari, Chrome */
  -webkit-transform: rotate(-5deg);
   
  /* Opera */
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

как мы видим из кода, мы просто приписываем на сколько градусов следует повернуть нужный нам объект, также можно использовать и отрицательное значение, например -120deg

Internet Explorer:

для данного браузера, мы будем использовать фильтр, хочу сразу сказать, что это не очень хорошо, плюс нам придётся поломать голову, чтобы подобрать на сколько градусов повернуть наш объект.

CSS-Code

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.981627183447664, M12=-0.1908089953765448, M21=0.1908089953765448, M22=0.981627183447664)";


Категория: HTML-CSS | Добавил: tashkent97
Просмотров: 497 | Загрузок: 74 | Источник: www.center-dm.ru/ | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<