3Д ротатор-куб для фотографий.

Нарисовать 3д куб несложно,но также просто и добавить эффект трансформации 3D куба на свою страницу. Согласитесь,что фото расположенные на гранях куба будут эффектно смотреться,вращаясь в 3д плоскости. Код CSS, для установки 3д-эффекта поворота, не большой и мало отразиться на загрузке страницы.

Установка кода для трансформации 3д куба.

Простая,но эффектная фишка 3Д анимации,подсмотренная на сайте shpargalkablog.ru и дополненная для повседневного применения на страницах блога. Куб вращающийся в 3д плоскости,конечно же вызовет интерес у посетителей,тем более,что на его гранях можно будет разместить свои фото или картинки.Для установки кода CSS,который и будет рисовать наш 3д куб, нужно скопировать приведённый ниже код и установить его в шаблон блога перед закрывающим
тегом ]]></b:skin> убрав теги <style>....<style>
или же в гаджет HTML и JavaScript в полном виде.

<style type="text/css">
#holder {
  margin:50px auto;
  -webkit-perspective:600px;
  -moz-perspective:600px;
  text-indent: 0px;
}

.box {
  position: relative;cursor: pointer;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  -webkit-animation: spin 150s infinite linear;
  -moz-animation: spin 150s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.box div {
  position: absolute;
  height: 200px;
  width: 200px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  -webkit-animation:rotate 150s infinite linear;
  -moz-animation:rotate 150s infinite linear;
}

.box div img {width:200px; height:200px;
  border-radius:200px;
  -webkit-animation:rot 150s infinite linear;
  -moz-animation:rot 150s infinite linear;
  padding: 0;
}

.box div.side1 {
  background:rgba( 213, 62, 7, 0.8);
  -webkit-transform:translateZ(100px);
  -moz-transform:translateZ(100px);
}
.box div.side2 {
  background:rgba( 127, 255, 212, 0.8);
  -webkit-transform:rotateY(90deg) translateZ(100px);
  -moz-transform:rotateY(90deg) translateZ(100px);
}
.box div.side3 {
  background:rgba( 255, 219, 88, 0.8);
  -webkit-transform:rotateY(180deg) translateZ(100px);
  -moz-transform:rotateY(180deg) translateZ(100px);
}
.box div.side4 {
  background:rgba( 153, 17, 153, 0.8);
  -webkit-transform:rotateY(-90deg) translateZ(100px);
  -moz-transform:rotateY(-90deg) translateZ(100px);
}
.box div.side5 {
  background:rgba( 0, 71, 171, 0.8);
  -webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
  -moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.box div.side6  {
  background:rgba( 0, 171, 147, 0.8);
  -webkit-transform:rotateX(90deg) translateZ(100px);
  -moz-transform:rotateX(90deg) translateZ(100px);
}

@-moz-keyframes spin {
  0% {-moz-transform: rotateX(0deg) rotateY(0deg);}
  100% {-moz-transform: rotateX(1080deg) rotateY(360deg);}
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotateX(0deg) rotateY(0deg);}
  100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);}
}
@-moz-keyframes rot {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rot {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
</style>

Читать дальше Как заработать на опросахЗаработать уже сегодня Монетизация мобильного трафика Партнёрские программы рунета Тизерная реклама-отзывы

Следующая часть НТМЛ,которую после добавления изображений нужно будет добавить куда угодно,исходя из дизайна страницы.

<div id="holder">
<div class="box">
<div class="side1"><img src="1" /></div>
<div class="side2"><img src="2" /></div>
<div class="side3"><img src="3" /></div>
<div class="side4"><img src="4" /></div>
<div class="side5"><img src="5" /></div>
<div class="side6"><img src="6" /></div>
</div>
</div>

Настройки кода для 3д куба.

В принципе код для вращения куба в 3д плоскости полностью готов к применению.Но если не устраивает размер фото, то следует изменить по своему усмотрению,поменяв значения img.vgol { width: 180px; height: 180px; на другие,подходящие по дизайну.Так же
можно поменять время трансформации граней куба,поменяв соответствующие значение.