CSS3 Трансформации.
В этой статье мы рассмотрим свойство transform, которое позволяет нам применять различные трансформации к элементам на странице.
Рассматривать данное свойство мы будем сразу на примере, так что давайте создадим HTML разметку.
<html>
<head>
<title>Transforms</title>
<meta charset="utf-8">
</head>
<body>
<div class="block">CSS3 Трансформации</div>
</body>
</html>
И зададим первоначальные стили
body {
background: #aaa;
font: 1em "PT Sans", Tahoma, Arial;
}
.block {
background: rgba(0,0,0,.3);
border-radius: 8px;
border: 3px solid #fff;
color: #fff;
font-size: 1.2em;
height: 150px;
line-height: 150px;
margin: 80px;
text-align: center;
width: 250px;
}
Теперь перейдём, собственно, к нашему свойству.
.block {
transform: translate(30px, 10px) rotate(30deg) scale(.5);
}
translate указывает на какое расстояние сдвинуть объект по оси X и по оси Y, а rotate - на сколько градусов повернуть. Можно задавать отрицательные значения, чтобы объект двигался/поворачивался в противоположную сторону. Scale отвечает за масштаб. Если мы напишем 2, то объект увеличится в 2 раза, а если 0.5(как в нашем случае), то уменьшится.
.block {
transform: skewX(30deg) skewY(30deg);
}
skewX отвечает за скос объекта по оси X, а skewY по оси Y.
.block {
transform: rotate(30deg);
transform-origin: top left;
}
transform-origin изменяет точку, относительно которой идёт трансформация по осям X, Y и Z(необязательно). По-умолчанию она находится в центре, но мы можем её поменять. Теперь наш объект будет вращаться относительно верхнего левого угла. Значения так же можно задавать в процентах(кроме оси Z)
Всё, что мы сейчас рассмотрели, были 2-х мерные трансформации, но есть ещё и 3-х мерные.
.block {
transform: rotateY(50deg);
}
Здесь мы поворачиваем объект по оси Y на 50 градусов в 3-х мерном пространстве, но это выглядит нереалистично, потому что нет перспективы. Перспектива(perspective) применяется к родительскому элементу. Изменим нашу HTML разметку: обернём наш блок в ещё один.
<div class="wrapper">
<div class="block">CSS3 Трансформации</div>
</div>
И зададим для нашего родительского блока перспективу(в пикселях) и, конечно же, размеры.
.wrapper {
perspective: 500px;
width: 200px;
height: 200px;
}
.block {
transform: rotateY(50deg);
}
Теперь наш объект вращается реалистично. Имейте ввиду, что точка схода для перспективы находится где-то в центре элемента wrapper. Если вы поменяете размеры для нашего родительского блока, то увидите, что наша трансформация тоже меняется. Эксперементируйте, чтобы добиться лучшего результата.
Также есть свойство rotate3d, которое позволяет нам вращать наш объект сразу во всех осях.
.block {
transform: rotate3d(-1,1,1, 40deg); // x,y,z,deg
}
Наш объект повернётся на 40 градусов, но по оси X на -40, потому что мы поставили значение в -1. Если значение 0, то ось выключена.
На этом всё! Обязательно попробуйте пример из статьи и придумайте свои.
-
Создано 12.04.2014 19:01:37
-
Михаил Русаков
Комментарии (3):
В гуглохроме не работает :(
Ответить
Мне кажется не работает, потому что нужно еще добавить псевдокласс :hover, и туда так же прописывать свойства transform. Ведь именно он отвечает на поведение блока при наведении на него курсора мышки (не нажимая ей на блок). Например: .block:hover { transform: rotate3d(-1,1,1, 40deg); // x,y,z,deg } Это я взял самый нижний пример, который привел Михаил. И так же для всех предыдущих.
Ответить
уф, красота. И какой малый вес! а вот так: body { background: #aaa; font: 1em "PT Sans", Tahoma, Arial; } .block { background: #362B1B; border-radius: 8px; border: 3px solid #563D1A; color: #D99230; font-size: 1.2em; height: 150px; line-height: 150px; margin: 80px; text-align: center; width: 250px; transition: all .5s ease-in-out; } .block:hover { transform: rotateY(1080deg); transition: all 1.5s ease-in-out; } - вообще глаз не отвести
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.