Гость
Статистика Форума
Последнии темы Читаемые темы Лучшии пользователи Новые пользователи
  • Мини сюжетный мод"Лейтенант посланный в зону"... (2)
  • ATM Shaders Mod v 0.1: Soft Hardened Shadows for DX10 (0)
  • Золотой Шар. Завершение (0)
  • Все игры по Средиземью (список) (0)
  • Тёмные uWnd окна для uCoz (0)
  • Weloveiconfonts — иконки из шрифтов на чистом CSS (0)
  • Эффекты увеличения изображений через плагин Cloud Zoom (0)
  • Подсветка синтаксиса Code через Google Pretty для uCoz (0)
  • Спасибо виде плюса за материал, статью для uCoz (0)
  • Кнопка переключения дизайна (0)
  • Русскоязычное руководство по моду Frackin' Universe... (38)
  • Фоны для сталкерского сайта (32)
  • Capital-Rp Wikia Code (22)
  • Личные сообщения (18)
  • Проблемы в модуле "Пользователи" (17)
  • Рамки сталкер / для аватарок / новостей. (13)
  • Контент блоки Сталкер // Content block stalker (11)
  • Гид прохождения Золотой Обоз 2 (11)
  • Блоки сталкер // Block stalker (9)
  • Вопросы // Ответы (8)
  • Xemordio (1792)
  • Ghosteron (2)
  • BlackHARD (0)
  • VarWarrer (0)
  • grigorjevaolga75 (0)
  • Milan_Shubin (0)
  • Илья (0)
  • taxxat (0)
  • (((miha))) (0)
  • igor (0)
  • TonaTor (06.06.2018)
  • BlackHARD (17.05.2018)
  • VarWarrer (16.05.2018)
  • grigorjevaolga75 (14.05.2018)
  • Milan_Shubin (30.04.2018)
  • Илья (18.04.2018)
  • taxxat (14.04.2018)
  • (((miha))) (11.04.2018)
  • igor (03.04.2018)
  • avdeevay27 (02.04.2018)

    • Страница 1 из 1
    • 1
    Форум » Web uCoz » Скрипты для uCoz » Эффект вращения изображения при наведении
    Эффект вращения изображения при наведении
    Xemordio [Offline]Дата: Воскресенье, 29.04.2018, 07:28 | Сообщение # 1
    Генерал [?]
    Группа: Администраторы
    Сообщений: 1792
    Награды: 0
    Репутация: 1

    Суть скрипта заключается в том, что при наведении на картинку она немного поворачивается и увеличивается. Очень подходит для каталога файлов или модулей "Новости и Статьи".
    Установка:
    Код с изображением (под редактирование):
    Код
    <a class="borderwrap newsimg" href="http://www.csomsk.ru/" title="Игровой портал Counter-Strike"><div class="imagewrapper"><img src="http://www.csomsk.ru/_ld/38/82471945.jpg" alt="Гигбар CS:GO" 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;}


    ---------------------------
    Примечание: размер изображения, угол наклона изображения и т.д легко отредактировать посредством изменения стилей CSS.
    Форум » Web uCoz » Скрипты для uCoz » Эффект вращения изображения при наведении
    • Страница 1 из 1
    • 1
    Поиск:

    13:16
    Обновить