» »

Вращающиеся кубики 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";  
  }


28.09.2015 Загрузок: 4 Просмотров: 475 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
kos
kos 28.09.2015 23:351
0
Интересные скрипты smile
workman
workman 28.09.2015 23:382
0
Забрал .. Спасибо ... Теперь придумаю куда их пришить на сайте. Давайте в принципе вместе по кумекаем, что из них можно придумать?
kos
kos 29.09.2015 00:243
0
можно баннер
kredit-oformi
kredit-oformi 29.09.2015 00:284
0
ха как батончики конфеты)))
Kosten
Kosten 29.09.2015 00:315
0
Можно вообще навигацию создать, да много к чему можно подстроить и настроить.
AnTron
AnTron 30.09.2015 07:436
0
Это интересное решение, которое может послужить на многих функциональности по сайту.
Unknown8409
Unknown8409 26.12.2015 13:557
0
решение действительно интересное,но я бы поменял класс wrapper на иное а то не будет работать
Kosten
Kosten 26.12.2015 17:208
0
Почему так решил, что не будет работать, или из той серий, что все не вечно.
Unknown8409
Unknown8409 26.12.2015 19:009
0
не из той серии) просто есть коды тоже с этим классом) я тупанул у меня просто забыл сказать слайдер налез на текст)
Kosten
Kosten 26.12.2015 19:1510
0
Посмотрев на демо, то видно, тут нужен оригинальный шаблон, или возможно вывести на страницу отдельную.
avatar