CSS стиль transform. Правила трансформации объектов.
CSS стиль transform трансформирует элемент путем масштабирования, поворота, сдвига, или наклона.
Internet Explorer 9 поддерживает свойство -ms-transform.
Safari, Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.
Opera с версии 15 до 23 поддерживает свойство -o-transform.
Firefox до версии 16 поддерживает свойство -moz-transform.
Трансформации преобразовывают элемент, не влияя на остальные части веб-страницы, - это значит, что другие объекты не будут относительно него сдвигаться. По умолчанию трансформации происходят относительно центра элемента. Свойства при этом не наследуются.
Краткая информация по CSS-свойству transform
Значение по умолчанию | none |
Наследуется | Нет |
Применяется | К трансформируемым элементам |
Правила написания свойства transform
transform: <функция> [<функция>]* | none
Здесь <функция>
- функция трансформации. Значение none
отменяет трансформацию.
Функции трансформации
Объектная модель
Объект.style.transform
Пример применения стиля transform
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля transform</title>
<style>
p {
width: 200px;
margin: 50px auto 0;
background: #ffbb00;
padding: 5px 10px;
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
p:first-child {background: #eedfac;}
</style>
</head>
<body>
<p id="top">Поворот скриптом</p>
<p>Поворот через CSS</p>
<script>
document.getElementById("top").style.transform = "rotate(-15deg)";
</script>
</body>
</html>