Веб-мастерская Ларисы ВоронинойСвойство transform CSS. Анимация изображений CSS.
WEB-мастерская Ларисы Ворониной logo

Свойство transform CSS. Анимация изображений CSS. Фев 7 2017


В этом уроке мы рассмотрим, как создать анимацию изображений  с помощью таких свойств, как transform CSS и transition-duration CSS.

С помощью свойства transform CSS изображение можно масштабировать, приближать, удалять, поворачивать, передвигать и искажать.

Свойство transition-duration CSS позволяет задать время анимации в секундах, т.е. сделать трансформацию плавной.

Рассмотрим на примере.

Увеличение масштаба изображения.

Наведите курсор мыши на изображение, чтобы посмотреть эффект.

transform CSS
index.html
<div id="ex1">
<img src="images/img1.jpg" />
</div>
style.css
#ex1 {
margin: 50px;
}
#ex1 img {
transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex1 img:hover {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}

Приближение элемента изображения.

transform CSS
index.html
<div id="ex2">
<img src="images/img1.jpg" />
</div>
style.css
#ex2 {
margin: 50px;
width: 300px;
overflow:hidden;
}
#ex2 img {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex2 img:hover {
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}

Поворот изображения.

transform CSS
index.html
<div id="ex3">
<img src="images/img1.jpg" />
</div>
style.css
#ex3 {
margin: 50px;
}
#ex3 img {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex3 img:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}

Искажение изображения.

transform CSS
index.html
<div id="ex4">
<img src="images/img1.jpg" />
</div>
style.css
#ex4 {
margin: 50px;
}
#ex4 img {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex4 img:hover {
transform: skewX(30grad);
-webkit-transform: skewX(30grad);
-moz-transform: skewX(30grad);
-o-transform: skewX(30grad);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}

Перемещение изображения.

transform CSS
index.html
<div id="ex5">
<img src="images/img1.jpg" />
</div>
style.css
#ex5 {
margin: 50px;
}
#ex5 img {
transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex5 img:hover {
transform: translate(240px, 0);
-webkit-transform: translate(240px, 0);
-moz-transform: translate(240px, 0);
-o-transform: translate(240px, 0);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}

Рейтинг@Mail.ru