Главная » Все материалы сайта » Справочник CSS-3 » Трансформация

transform | Свойство CSS

transform

Internet Explorer		Chrome	Opera		Safari	Firefox		Android	iOS
9.0+	10.0	5.0+	10.5+	12.10+	3.1+	3.5+	16.0+		2.0+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	К блочным и строчным элементам
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-2d-transforms/#transform-property

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций. Другими словами, свойство 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: <функция> [<функция>]* | none

Значения

функция: Функция трансформации.
none: Отменяет действие трансформации.

Функции трансформации

matrix

Задаёт матрицу преобразований.

rotate

Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

transform: rotate(<угол>)

scale

Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 - уменьшает масштаб.

scaleX

Масштабирует элемент по горизонтали.

transform: scaleX(sx);

scaleY

Масштабирует элемент по вертикали.

transform: scaleY(sy);

skewX

Наклоняет элемент на заданный угол по вертикали.

transform: skewX(<угол>)

skewY

Наклоняет элемент на заданный угол по горизонтали.

transform: skewY(<угол>)

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

transform: translate(tx[, ty])

translateX

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

transform: translateX(tx)

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вверх, отрицательное вниз.

transform: translateY(ty)

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>transform</title>
 <style>
 .turn:hover {
 -moz-transform: rotate(15deg); /* Для Firefox */
 -ms-transform: rotate(15deg); /* Для IE */
 -webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */
 -o-transform: rotate(15deg); /* Для Opera */
 transform: rotate(15deg);
 }
 </style>
 </head>
 <body>
 <h4>При наведении мышкой на рисунок - крокодил поворачивается на 15 градусов</h4>
 <p><img src="/CSS_3/img_css_3/krokodil.png" alt="Крокодил" class="turn">
 </p>
 </body>
</html>

В данном примере при наведении курсора на изображение, оно поворачивается на 15 градусов по часовой стрелке.

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

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство transform & Генератор transform:rotate;</title>
<style type="text/css">

</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>

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

Браузеры

Internet Explorer 9 поддерживает нестандартное свойство -ms-transform.
Chrome, Safari и iOS поддерживают нестандартное свойство -webkit-transform.
Opera до версии 12.10 поддерживает нестандартное свойство -o-transform.
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform.

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

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

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

Просмотров: 6785 | Теги: rotate, CSS3, transform, matrix | Рейтинг: 0.0/0

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