вРазные полезности

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