Блог Сергея Байдачного

Мой блог о технологиях

Internet Explorer 9: двумерные преобразования

2 комментария

Последнее нововведение в Internet Explorer 9 (и пойду спать), это двумерные преобразования. Речь идет о простых 2D преобразованиях, описанных тут (http://www.w3.org/TR/css3-2d-transforms/). Фактически в CSS появляется возможность использовать два дополнительных атрибута, это transform и transform-origin. Правда в Internet Explorer 9 эти атрибуты носят другие названия, это –ms-transform и –ms-transform-origin. Причина такого извращения мне непонятна. Видимо драфт документа планируют серьезно изменить, при этом очень хотелось побить тех, кто кричал, что в IE 9 нет трансформации (кстати, другие браузеры реализуют подобные атрибуты со своими названиями).

Итак,

–ms-transform-origin задает точку, относительно которой будет происходить трансформация объекта. Как ни странно, но по умолчанию это центр объекта. При этом, можно указывать как абсолютное значение (в пикселях), так и относительное – в процентах.

-ms-transform задает саму трансформацию. Тут могут быть использованы следующие функции, которые записываются через пробел в одну строку:

  • matrix
  • translate (или translateX, translateY)
  • rotate
  • scale (или scaleX, scaleY)
  • skew (или skewX, skewY)

Все эти функции достаточно известные и принимают в качестве параметров одно или два значения.

Ниже пример небольшой трансформации для элемента div.

   1:  <!DOCTYPE html>
   2:   
   3:  <html lang="en">
   4:      <head>
   5:          <meta charset="utf-8" />
   6:          <title></title>
   7:          <style>
   8:    div {
   9:        height: 100px; width: 100px;
  10:        background:yellow;
  11:        -ms-transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
  12:    }          
  13:          </style>
  14:      </head>
  15:      <body>
  16:         <div>hello</div> 
  17:      </body>
  18:  </html>

 

На экране можно будет увидеть следующую картину:

image

Естественно, что более значимых эффектов можно добиться, комбинирую трансформацию и javascript.

Реклама

Written by Sergiy Baydachnyy

13.02.2011 в 23:34

Опубликовано в Internet Explorer 9

Tagged with

комментария 2

Subscribe to comments with RSS.

  1. А приставка «ms» — это дополнительный гемморой «кросбраузерного» верстальщика.

    fotodev

    14.02.2011 at 11:26

    • Смотри на это про другому. Майкрософт не оставит тебя без работы 😉

      sa

      05.03.2011 at 11:19


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: