+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Transform css / Трансформация с помощью css3

Свойство transform в css3 позволяет изменять элемент. Рассмотрим подробнее.

Демонстрация

rotate
Поворачивает элемент на заданный угол
<div class="rotate">Наш блок</div>
.rotate{
padding:10px;
background:rgba(0,0,0,.35);
font:24px Arial,sans-serif;
width:150px;
transform:rotate(5deg);
-o-transform:rotate(5deg); /* для Оперы */
-moz-transform:rotate(5deg); /* Firefox */
-webkit-transform:rotate(5deg); /* Chrome */}

scale
Масштабирует элемент по горизонтали и вертикали. В нашем примере эффект будет виден при наведении курсора на элемент.
<div class="scale">Наш блок</div>
.scale{
padding:10px;
background:rgba(0,0,0,.35);
font:24px Arial,sans-serif;
width:150px;}
.scale:hover{
transform:scale(1.2);
-o-transform:scale(1.2);
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);}
В данном примере мы масштабируем элемент одновременно по горизонтали и по вертикали. Если Вы хотите изменить элемент только по горизонтали, вместо scale используйте scaleX и scaleY для изменения по вертикали.
.scale{
padding:10px;
background:rgba(0,0,0,.35);
font:24px Arial,sans-serif;
width:150px;}
.scale:hover{
/* увеличиваем элемент только в ширину */
transform:scaleX(1.2);
-o-transform:scaleX(1.2);
-moz-transform:scaleX(1.2);
-webkit-transform:scaleX(1.2);}

skewX, skewY
Наклоняет элемент на заданный угол по горизонтали и вертикали
<div class="skew">Наш блок</div>
.skew{
padding:10px;
background:rgba(0,0,0,.35);
font:24px Arial,sans-serif;
width:150px;
transform:skewX(45deg);
-o-transform:skewX(45deg);
-moz-transform:skewX(45deg);
-webkit-transform:skewX(45deg);}

translate
Данное свойство позволяет сдвигать элемент по горизонтали и вертикали на указанное значение.
Если указано положительное значение, элемент сдвигается вправо, отрицательное влево. В нашем примере эффект будет виден при наведении курсора на элемент.
<div class="translate">Наша строка</div>
.translate{
padding:10px;
background:rgba(0,0,0,.35);
font:24px Arial,sans-serif;
width:150px;}
.translate:hover{
transform:translate(10px,20px);
-o-transform:translate(10px,20px);
-moz-transform:translate(10px,20px);
-webkit-transform:translate(10px,20px);}


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 922