transform-origin | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Главная » Справочник CSS3 » 2D & 3D Трансформация


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


transform-origin | Свойство CSS

Свойство transform-origin устанавливает координаты трансформации элемента.




Свойство transform-origin устанавливает координаты трансформации элемента для переворачивания,наклона и масштабирования относительно установленных координат.Могут быть применены два значения для осей X и Y ( 2D трансформация ),для браузеров поддерживающих 2D трансформацию.Могут быть применены три значения для осей X , Y и Z ( 3D трансформация ),для браузеров поддерживающих 3D трансформацию.Вобоих случаях свойство должно применяться совместно со свойством transform и префиксами к нему.Существуют альтернативные свойства для браузеров.
1.Internet Explorer -ms-transform-origin,поддерживает только 2D трансформацию
2.Mozila -moz-transform-origin,поддерживает только 2D трансформацию
3.Opera -o-transform-origin,поддерживает только 2D трансформацию
4.Safari и Chrome -webkit-transform-origin,поддерживает 2D и 3D трансформацию
Свойство применимо к блочным и строчным элементам,создано в версии 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">
<!--
.verh {
position:relative;
height:150px;
width:200px;
margin:50px;
padding:10px auto;
border:5px double green;
}
#rotate {
padding:50px;
position:absolute;
border: 5px double indigo;
background-color:blue;
transform:rotate(360deg);
transform-origin:30% 10%;
-ms-transform:rotate(360deg);
-ms-transform-origin:30% 10%;
-webkit-transform:rotate(360deg);
-webkit-transform-origin:30% 10%;
-moz-transform:rotate(360deg);
-moz-transform-origin:30% 10%;
-o-transform:rotate(360deg);
-o-transform-origin:30% 10%;
}
-->
</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://www.w3.org/TR/css3-2d-transforms/#transform-origin
Категория: 2D & 3D Трансформация | Добавил: IZOTOP (29.05.2012) | Автор: Меренков Михаил E W
Просмотров: 1711 | Теги: css, трансформации, свойство, координаты, пример, style, transform-origin | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

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