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


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



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


transform | Свойство CSS

Свойство transform управляет 2D & 3D трансформацией элемента.




Свойство transform управляет 2D & 3D трансформацией элемента,производя изменение его положения по внутренним и внешним сторонам,а так же по всем координатам оси.Довольно интересное свойство в котором можно осуществить абстрактное видение элемента,который можно наклонить и повернуть,сузить расширить по указанным значениям.Могут быть применены несколько видов трансформации,для этого указывайте их через пробел.Существуют альтернативные свойства для браузеров.
1.Internet Explorer -ms-transform,поддерживает только 2D трансформацию
2.Mozila -moz-transform,поддерживает только 2D трансформацию
3.Opera -o-transform,поддерживает только 2D трансформацию
4.Safari и Chrome -webkit-transform,поддерживает 2D и 3D трансформацию
Свойство применимо к блочным и строчным элементам,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




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


Свойство
Описание
-ms-transformАльтернативное свойство для браузера Internet Explorer
-moz-transformАльтернативное свойство для браузера Mozila
-o-transformАльтернативное свойство для браузера Opera
-webkit-transformАльтернативное свойство для браузеров Safari и Chrome

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


Значение
Описание
noneТрансформация не применяется
matrix(<число>,<число>,<число>,<число>,<число>,<число>)Создаёт 2D трансформацию,используя матрицу из шести значений
matrix3d(<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>,<число>)Создаёт 3D трансформацию,используя матрицу 4x4 из 16 значений
translate(x,y)Создаёт 2D перемещение по двум осям
translate3d(x,y,z)Создаёт 3D перемещение по 3 осям
translateX(<число>)Создаёт перемещение,используя значение только для оси X
translateY(<число>)Создаёт перемещение,используя значение только для оси Y
translateZ(<число>)Создаёт перемещение,используя значение только для оси Z
scale(<число>)Создаёт масштабирование элемента,можно задать два числа через запятую,где первое по оси X, второе по оси Y.Если задано только одно значение,масштаб по оси Y будет равен масштабу по оси X
scale3d(x,y,z)Создаёт 3D трансформацию масштабирования
scaleX(<число>)Создаёт трансформацию масштабирования,задавая значение для оси X
scaleY(<число>)Создаёт трансформацию масштабирования,задавая значение для оси Y
scaleZ(<число>)Создаёт трансформацию масштабирования,задавая значение для оси Z
rotate(<угол>)Создаёт поворот элемента на заданный угол относительно центра поворота заданного свойством transform-origin
rotate3d(<число>, <число>, <число>, <угол>)Создаёт поворот элемента на заданный угол по направлению вектора,заданного первыми тремя параметрами,элемент поворачивается относительно точки,заданной свойством transform-origin
rotateX(<число>)Создаёт угол поворота по оси X
rotateY(<число>)Создаёт угол поворота по оси Y
rotateZ(<число>)Создаёт угол поворота по оси Z
skew(<угол>)Создаёт наклон элемента,можно задать два числа через запятую,где первое по оси X, второе по оси Y.Если задано только одно значение,наклон по оси Y будет равен 0
skewX(<угол>)Создаёт угол наклона элемента по оси X
skewY(<угол>)Создаёт угол наклона элемента по оси Y
perspective(<число>)Создаёт расстояние в пикселях от зрителя до плоскости Z = 0

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство transform & Генератор transform:rotate;</title>
<style type="text/css">
<!--
.centeron {
color:green;
font-size:20px;
}
#rotate {
width:305px;
height:245px;
background-image:url(http://delaisait.ucoz.ru/css/demo/img/transform.png);
background-repeat:no-repeat;
border:10px double green;
transform:rotate(10deg);
-ms-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
}
-->
</style>
<script type="text/javascript">
function rotate(value)
{
document.getElementById('rotate').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('rotate').style.msTransform="rotate(" + value + "deg)";
document.getElementById('rotate').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('rotate').style.OTransform="rotate(" + value + "deg)";
document.getElementById('rotate').style.transform="rotate(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
</script>
</head>
<body>
<center>
<h3>Генератор transform:rotate;</h3>
<div class="centeron">
<p>Введите значение в поле и нажмите Enter &crarr;</p>
<br><br><br>
<div id="rotate"></div>
<br>
Введите Ваше значение ( положительное или отрицательное )<br>
<input type="range" min="-360" max="360" value="10" onchange="rotate(this.value)" /><br>
transform:rotate(<span id="span1">10deg</span>);
</div>
</center>
</body>
</html>

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




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-2d-transforms/#effects
Категория: 2D & 3D Трансформация | Добавил: IZOTOP (26.05.2012) | Автор: Меренков Михаил W
Просмотров: 1945 | Теги: css, transform, пример, style | Рейтинг: 0.0/0

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

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