Internet Explorer 9: двумерные преобразования
Последнее нововведение в 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>
На экране можно будет увидеть следующую картину:
Естественно, что более значимых эффектов можно добиться, комбинирую трансформацию и javascript.
А приставка «ms» — это дополнительный гемморой «кросбраузерного» верстальщика.
fotodev
14.02.2011 at 11:26
Смотри на это про другому. Майкрософт не оставит тебя без работы 😉
sa
05.03.2011 at 11:19