Страница 1 из 11
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Блоки для кино сайта в 3D анимированные
Блоки для кино сайта в 3D анимированные
workman
Дата: Воскресенье, 24.09.2017, 13:53 | Сообщение # 1
Гл. Модератор
Сообщений:1642
Награды: 7


Данный код сделан под три блока, но вы можете сделать хоть под один 04b
Как вы видите что данные блоки исполнены на одном css без js


Код
<ul id="workman">
    <li>
        <img src="ссылка на картинку" alt="заголовок фильма">
        <div class="workmaninfo">
               <h3>Название фильма</h3>
                <p>Краткое описание фильма</p>
            <a href="#" title="">Подробнее</a>
        </div>
    </li>
    <li>
        <img src="ссылка на картинку" alt="заголовок фильма">
        <div class="workmaninfo">
               <h3>Название фильма</h3>
                <p>Краткое описание фильма</p>
            <a href="#" title="">Подробнее</a>
        </div>
    </li>
    <li>
        <img src="ссылка на картинку" alt="заголовок фильма">
        <div class="workmaninfo">
            <h3>Название фильма</h3>
                <p>Краткое описание фильма</p>
            <a href="#" title="">Подробнее</a>
        </div>
    </li>
</ul>


Код
#workman{list-style:none;margin:100px 0;height:550px}
#workman li{display:inline;float:left;-webkit-perspective:500;-webkit-transform-style:preserve-3d;-webkit-transition-property:perspective;-webkit-transition-duration:.5s}
#workman li:hover{-webkit-perspective:5000}
#workman li img{border:10px solid #fcfafa;-webkit-transform:rotateY(30deg);-moz-box-shadow:0 3px 10px #888;-webkit-box-shadow:0 3px 10px #888;-webkit-transition-property:transform;-webkit-transition-duration:.5s}
#workman li:hover img{-webkit-transform:rotateY(0deg)}
.workmaninfo{border:10px solid #fcfafa;padding:20px;width:200px;height:180px;background-color:#deddcd;margin:-195px 0 0 55px;position:absolute;-moz-box-shadow:0 20px 40px #888;-webkit-box-shadow:0 20px 40px #888;-webkit-transform:translateZ(30px) rotateY(30deg);-webkit-transition-property:transform,box-shadow,margin;-webkit-transition-duration:.5s}
#workman li:hover .workmaninfo{-webkit-transform:rotateY(0deg);-webkit-box-shadow:0 5px 10px #888;margin:-175px 0 0 30px}
.workmaninfo h3{color:#7a3f3a;font-variant:small-caps;font-family:Georgia,serif,Times;text-align:center;padding-bottom:15px}
.workmaninfo p{padding-bottom:15px}
.workmaninfo a{background-color:#7a3f3a;padding:5px 10px;color:#eee;text-decoration:none;display:block;width:80px;text-align:center;margin:0 auto;-moz-border-radius:5px;-webkit-border-radius:5px}
.workmaninfo a:hover,.workmaninfo a:focus{background-color:#6a191f;color:#fff}


У каждого имеется желание просмотреть как работает то что я сюда выдаю, так вот вам ссылочка 04b
Адаптацию конечно же не настраивал, надеюсь что все , здеся знают как работать с такими стилями как - @media (max-width:...){...} Но тот кто знает, может и сам настроить, кто не знает, или просто лень матушка одалевает, то пишите. 04b


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)

Сообщение отредактировал
workman - Воскресенье, 24.09.2017, 13:54
Страна: (RU)
Kosten
Дата: Воскресенье, 24.09.2017, 15:02 | Сообщение # 2
Администраторы
Сообщений:15477
Награды: 50


workman, под 2 или один блок будет красивей, просто на 3 краткое описание небольшое будет.
Страна: (RU)
workman
Дата: Воскресенье, 24.09.2017, 15:12 | Сообщение # 3
Гл. Модератор
Сообщений:1642
Награды: 7


Цитата Kosten ()
од 2 или один блок будет красивей, просто на 3 краткое описание небольшое будет

НУ то уже на усмотрение каждого человека. Кому как удобней ) Главное не это! Главное то что меня сегодня понесло 11a


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Блоки для кино сайта в 3D анимированные
Страница 1 из 11
Поиск: