Вращающиеся кубики CSS3 для сайта uCoz
 | |
| Всегда охота сделать на сайте, что то оригинальное не похожее на другие и здесь Вращающиеся кубики CSS3 для сайта uCoz которые безусловно внесут свою долю в дизайн и его эффективность.Скрипт эффект вращающего кубка , когда гость или пользователь вашего сайта первоначальна видит изображение в виде одного из разделов сайта или рекламного баннера а при наведении курсора происходит анимированный показ его описания или другой полезной информации. Сам куб работает полностью на стилях CSS3, что позволяет полностью настраивать кубок под свои нужды. Идей по реализации может быть множество и ограничится можно лишь своей фантазией . Так же что хорошо так это то что установка простая так как мы уже знаем что данный скрипт работает только на стилях CSS3. Установка Скрипта с эффектом вращающего кубка для сайтов uCoz Для установки вам потребуется скачать не большой архив с сайта и загрузить в файловый менеджер вашего сайта папку images. Далее в то место где вам нужны кубки вам следует установить ниже приведённый код. Код <div id="container"> <h1>Использование CSS3 свойства 3D TRANSFORM</h1> <div class="wrapper"> <div class="item"> <img src="images/1.png" /> <span class="information"> <strong>Zornet.Ru</strong> Скрипты для ваших сайтов. </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="images/2.png" /> <span class="information"> <strong>Zornet.Ru</strong> Шаблоны для ваших сайтов. </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="images/3.png" /> <span class="information"> <strong>Zornet.Ru</strong> Подписывайтесь на рассылку сайта. </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="images/4.png" /> <span class="information"> <strong>Zornet.Ru</strong> Читайте нашу RSS ленту. </span> </div> </div> </div> Далее остаётся прописать стили и для этого так же скопируйте нижние стили и дополните их в свои стили на сайте в самый низ и сохраните. Код #container { display: block; margin: 0 auto; width: 700px; } #information { color: red; font-size: 14px; } .wrapper { display: inline-block; width: 310px; height: 100px; vertical-align: top; margin: 1em 1.5em 2em 0; cursor: pointer; position: relative; font-family: Tahoma, Arial; -webkit-perspective: 4000px; -moz-perspective: 4000px; -ms-perspective: 4000px; -o-perspective: 4000px; perspective: 4000px; } .item { height: 100px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform .6s; -moz-transition: -moz-transform .6s; -ms-transition: -ms-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s; } .item:hover { -webkit-transform: translateZ(-50px) rotateX(95deg); -moz-transform: translateZ(-50px) rotateX(95deg); -ms-transform: translateZ(-50px) rotateX(95deg); -o-transform: translateZ(-50px) rotateX(95deg); transform: translateZ(-50px) rotateX(95deg); } .item:hover img { box-shadow: none; border-radius: 15px; } .item:hover .information { box-shadow: 0px 3px 8px rgba(0,0,0,0.3); border-radius: 3px; } .item img { display: block; position: absolute; top: 0; border-radius: 3px; box-shadow: 0px 3px 8px rgba(0,0,0,0.3); -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); -ms-transform: translateZ(50px); -o-transform: translateZ(50px); transform: translateZ(50px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; } .item .information { display: block; position: absolute; top: 0; height: 80px; width: 290px; text-align: left; border-radius: 15px; padding: 10px; font-size: 12px; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); box-shadow: none; background: rgb(236,241,244); background: -moz-linear-gradient(top, rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1))); background: -webkit-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: -o-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: -ms-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 ); -webkit-transform: rotateX(-90deg) translateZ(50px); -moz-transform: rotateX(-90deg) translateZ(50px); -ms-transform: rotateX(-90deg) translateZ(50px); -o-transform: rotateX(-90deg) translateZ(50px); transform: rotateX(-90deg) translateZ(50px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; } .information strong { display: block; margin: .2em 0 .5em 0; font-size: 20px; font-family: "Oleo Script"; }  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
| |
