Увеличение, трансформация картинки CSS-3


Еще один интересный эффект увеличения или трансформации картинки CSS-3. Точнее этот эффект применим не только к картинкам img, а и к такому элементу, как div, p , span, a и так далее.

Увеличение, трансформация картинки CSS
Увеличение, трансформация картинки CSS
Увеличение, трансформация картинки CSS
Увеличение, трансформация картинки CSS

Чтобы увидеть эффект увеличения, трансформации картинки, наведите курсор.

Эффект увеличения, трансформации предназначен для красивого оформления web-страниц. Таким эффектом можно украшать ссылки, заострять внимание посетителя на каких-то элементах, призывах. Вобщем тут все ограничено лишь объемом вашей фантазии.


Увеличение, трансформация картинки CSS-3. Реализация


Тут ничего сложного нет. Сначала привожу CSS код:

 
.transform-rotate{
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
cursor: pointer;
margin-left: 35px;
}
.transform-rotate:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.6;
}

Ну и следом HTML. Для осуществления трансформации, к элементу всего-лишь нужно добавить класс .transform-rotate. В примере это будет обычная картинка:

 <img class="transform-rotate" src="..." alt="..." />

Только пропишите url картинки.

скилл бокс


Похожие по Тегам статьи