• Страница 1 из 1
  • 1
Форум Kentos311 » uCoz » Скрипты для сайта » ЭФФЕКТ ВРАЩЕНИЯ ИЗОБРАЖЕНИЯ ПРИ НАВЕДЕНИИ UCOZ (Хотите на свой сайт добавить эффект вращение картинки?)
ЭФФЕКТ ВРАЩЕНИЯ ИЗОБРАЖЕНИЯ ПРИ НАВЕДЕНИИ UCOZ
Kentos311Дата: Понедельник, 08.01.2018, 15:02 | Сообщение # 1
Сообщений: 729
Статус:

Очень интересный скрипт для uCoz, этот эффект придаст вашему сайту хороший и интересный вид. Скрипт работает очень просто, при наведении курсором мышки на картинку она будет вращаться в левую сторону и при этом увеличиваться. Смотрится красиво и оригинально, многим пользователям этот эффект понравиться.

Установка скрипта:

Код с изображением (под редактирование):
Код
<a class="borderwrap newsimg" href="http://mir-hack.ru/" title="Mir-Hack.Ru - портал для вебмастера"><div class="imagewrapper"><img src="http://mir-hack.ru/img/logo-mir-hack.png" alt="Всё для uCoz" class="imagebig"/></div></a>


В Таблицу стилей (CSS) вставляем:
Код
.imagewrapper {
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;}
.imagewrapper:hover img {
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);}
.imagewrapper img {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.imagebig {width:100%;display:block;}
.borderwrap {background: #fff;
border: 1px solid #e6e5e5;
border-collapse: separate;
padding:5px;
display:block;}
.newsimg {width:180px;margin: 0 10px 0 0;float:left;}
Прикрепления: 8252098.gif (798.5 Kb)
 
Форум Kentos311 » uCoz » Скрипты для сайта » ЭФФЕКТ ВРАЩЕНИЯ ИЗОБРАЖЕНИЯ ПРИ НАВЕДЕНИИ UCOZ (Хотите на свой сайт добавить эффект вращение картинки?)
  • Страница 1 из 1
  • 1
Поиск: