Свойство CSS transform-origin нужен для изменения центра координат относительно которого будет осуществляться трансформация (transform). Естественно этот тег работает только в случае трансформации.
Синтаксис CSS transform-origin
transform-origin: X Y Z;
Где Х может принимать значения
длина - задается в px относительно центра объекта (например, 5px)
проценты - задается в % относительно центра объекта (50% - это центр)
left - относительно левого края объекта
center - относительно центра (стоит по умолчанию)
right - относительно правого края объекта
Где Y может принимать значения
длина - задается в px относительно центра объекта (например, 5px)
проценты - задается в % относительно центра объекта (50% - это центр)
top - относительно верхнего края объекта
center - относительно центра (стоит по умолчанию)
bottom - относительно нижнего края объекта
Где Z может принимать значения только в единицах.
Прежде чем рассматривать примеры, скажем пару слов про особенности в браузерах.
Браузеры
Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:
-ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
-webkit-transform-origin - для Chrome, Safari, Android и iOS
-o-transform-origin - для Opera до версии 12.10
-moz-transform-origin - для Firefox до версии 16.0
Жми пример
[html]
<html>
<head>
<style>
.primer1{
width: 100px;
height: 100px;
background: #444;
margin: 30px;
}
.primer1:hover{
width: 100px;
height: 100px;
background: #888;
margin: 30px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-webkit-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
}
</style>
</head>
<body>
<div class="primer1">Вот такой пример</div>
</body>
</html>
[/html]
Код
<html>
<head>
<style>
.primer1{
width: 100px;
height: 100px;
background: #444;
margin: 30px;
}
.primer1:hover{
width: 100px;
height: 100px;
background: #888;
margin: 30px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-webkit-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
}
</style>
</head>
<body>
<div class="primer1">Вот такой пример</div>
</body>
</html>
