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

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

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

Эффект увеличения, трансформации предназначен для красивого оформления 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 картинки.

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

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