transform-origin

Свойство transform-origin устанавливает координаты трансформации элемента для переворота, наклона и масштабирования относительно установленных координат. Могут быть применены два значения для осей X и Y (2D трансформация) для браузеров, поддерживающих 2D трансформацию. Могут быть применены три значения для осей X, Y и Z (3D трансформация) для браузеров, поддерживающих 3D трансформацию. В обоих случаях свойство должно применяться совместно со свойством transform и префиксами к нему. Существуют альтернативные свойства для браузеров.

1. Internet Explorer -ms-transform-origin.
2. Mozila -moz-transform-origin.
3. Opera -o-transform-origin.
4. Safari и Chrome <em>-webkit-transform-origin.

Свойство применимо к блочным и строчным элементам, создано в версии CSS3 и проходит валидацию согласно версии CSS3.

Дополнительные свойства применяемые к transform-origin

Свойство	Описание
-ms-transform-origin	Альтернативное свойство для браузера Internet Explorer
-moz-transform-origin	Альтернативное свойство для браузера Mozila
-o-transform-origin	Альтернативное свойство для браузера Opera
-webkit-transform-origin	Альтернативное свойство для браузеров Safari и Chrome, поддерживает 3D трансформацию

Дополнительные значения применяемые к transform-origin

Значение	Описание
<Число>	Числовое значение, расстояния от левого верхнего угла элемента в плоскости Z=0 до координат центра трансформации, при этом координату Z можно задать только абсолютной величиной
<Процент>	Значения в процентах, указывает на расстояние от левого верхнего угла элемента до координаты центра трансформации в процентах от размера элемента, при этом координата по оси X вычисляется в процентах от ширины элемента, а координата по оси Y от высоты
left	Соответствует координате по оси X равной нолю, трансформация происходит по левому краю элемента
right	Соответствует координате по оси X равной 100% или соответствует ширине самого элемента, трансформация происходит по правому краю элемента
top	Соответствует координате по оси Y равной нолю, трансформация происходит по верхнему краю элемента
bottom	Соответствует координате по оси Y равной 100% или соответствует высоте самого элемента, трансформация происходит по нижнему краю элемента
center	Соответствует координате по оси X равной 50%, трансформация происходит по середине элемента, без значений left, right, top и bottom устанавливает 50% по обеим осям X и Y

Свойство работает в браузерах

В этом браузере работает с применением альтернативного свойства

Пример применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Генератор transform:rotateY; & transform-origin:X% Y%;</title>
<style type="text/css">

</style>
<script type="text/javascript">
function changeRot(value)
{
document.getElementById('rotate').style.transform="rotate(" + value + "deg)";
document.getElementById('rotate').style.msTransform="rotate(" + value + "deg)";
document.getElementById('rotate').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('rotate').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('rotate').style.OTransform="rotate(" + value + "deg)";
document.getElementById('rotateY').innerHTML=value + "deg";
}

function changeOrg()
{
var x=document.getElementById('ox').value;
var y=document.getElementById('oy').value;
document.getElementById('rotate').style.transformOrigin=x + '% ' + y + '%';
document.getElementById('rotate').style.msTransformOrigin=x + '% ' + y + '%';
document.getElementById('rotate').style.webkitTransformOrigin=x + '% ' + y + '%';
document.getElementById('rotate').style.MozTransformOrigin=x + '% ' + y + '%';
document.getElementById('rotate').style.OTransformOrigin=x + '% ' + y + '%';
document.getElementById('origin').innerHTML=x + "% " + y + "%";
}
</script>
</head>
<body>
<center>
<h3>Генератор transform:rotateY; & transform-origin:X% Y%;</h3>
<p>Введите значение в поле и нажмите Enter &crarr;</p>
<br><br>
<div class="verh">
<div id="rotate">Э Л Е М Е Н Т</div></div>
Rotate:<input type="range" min="-360" max="360" value="360" onchange="changeRot(this.value)">
transform:rotateY:(<span id="rotateY">360deg</span>);<br><br>
Ось ( X ) = <input type="range" min="-100" max="200" value="30" onchange="changeOrg()" id="ox"><br><br>
Ось ( Y ) = <input type="range" min="-100" max="200" value="10" onchange="changeOrg()" id="oy">
transform-origin:<span id="origin">30% 10%</span>;
</center>
</body>
</html>

Пример в действии

Источники: http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Трансформация | Добавил: evkuriy (05.07.2013)

Просмотров: 607 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]