Как включить CSS-преобразование в IE6-8

Современные браузеры имеют большую поддержку большинства свойств CSS3. Вы можете с легкостью применять CSS анимации, преобразования и градиенты. Тем не менее, все еще есть много пользователей старых версий Internet Explorer, которые не поддерживают новые свойства CSS3. В этой статье я поделюсь краткими советами о том, как включить преобразование CSS в IE6-8.

Свойство CSS Transform позволяет нам преобразовывать элемент в двухмерном или трехмерном пространстве. Вы можете переводить, масштабировать, вращать и наклонять элемент, используя CSS Transform. Для современных браузеров, таких как Firefox, браузер Opera и Webkit поддерживают CSS Transform со своими префиксами, специфичными для поставщика (с использованием -moz-transform, -o-transform и -webkit-transform соответственно), но вы не найдете его в Internet Explorer. Поэтому здесь я буду использовать библиотеку javascript cssSandpaper, которая позволяет использовать кросс-браузерные CSS-преобразования даже в старых версиях IE.

Рекомендуемое чтение: взгляд на кубический Безье в переходе CSS3

Начиная
Во-первых, загрузите cssSandpaper с Github Repository, Затем включите следующие обязательные библиотеки JavaScript, которые поставляются с cssSandpaper.

-sand-преобразования Имущество
cssSandpaper представляет новое префиксное свойство для применения преобразования. Это новое свойство можно использовать вместе с другими префиксами поставщика браузера, такими как -moz-transform, -webkit-transform или другими префиксными свойствами браузера, например:

#container {
-moz-преобразование: ;
-webkit-transfrom: ;
-sand-преобразование: ;
преобразование: ;
}

CssSandpaper наследует стандартные функции CSS для выполнения преобразования, такого как вращение и масштабирование. Ниже приведен список функций, которые вы можете использовать в свойстве -sand-transform.

• поворот (угол) используется для поворота элемента в градусах или радианах. например: -sand-transform: повернуть (45 градусов)
• шкала (SX[, sy]) используется для масштабирования элемента. например: -sand-transform: scale (1[,2]) это означает, что мы масштабируем элемент по оси X в соответствии с исходным размером, а по оси Y — в два раза больше исходного размера.
• skewX (ax) и skewY (ay) используются для перекоса элемента вокруг осей x и y на заданные углы в градусах или радианах. например: skewX (30 градусов)
• матрица (a, c, b, d, tx, ty) используется для создания матрицы двумерного преобразования, состоящей из указанных шести значений.

Пример использования
Предполагая, что мы построили коробку, используя

<

div>, И теперь вы хотите, чтобы блок отодвинулся на 200 пикселей по горизонтали от своего исходного положения и одновременно повернул его на 45 градусов. Вы можете использовать cssSandpaper для достижения этого эффекта следующим образом:

#box {
ширина: 150 пикселей;
высота: 100 пикселей;
-sand-transform: translate (200px, 0) rotate (45deg);
}

Вы можете увидеть демо ниже. Обратите внимание, что вы должны посмотреть на это и в Internet Explorer 6-8.
Вывод
Возможно, это не самое элегантное решение, поскольку для достижения этого простого эффекта нам нужно сложить кучу библиотек JavaScript. Но если ваш начальник или клиент настаивает на включении ротации в Internet Explorer 8 (по какой-то бессмысленной причине), вы можете использовать cssSandpaper, чтобы это произошло.