(отваряйте във webkit – Safari или Chrome)

За упражнение, на лекция по CSS3, имахме поставена задача, да направим въртящо се рубиково кубче.
CSS3 ни позволява да постигнем невероятни ефекти, без допълнителен скрипт. За съжаление, към днешна дата, може да се радваме на тези features само в някои праузъри. Ако искате да ви се изобразява крайният резултат на кубчето ми правилно, използвайте някой от браузърите базиран на webkit (Safari или Chrome).

1.изграждане на HTML и 2D CSS

Резализация на 3D елементарна анимация в CSS е по-лесна отколото би могло да изглежда на пръв поглед. Като за начало, ще направим един .html файл, в който всяка страна на кубчето представлява един div (ще получим 6 дива – съответни на 6-те стени на кубчето), и всеки един див ще има по един unordered list (ul) с 9 item (li) в него. Item-ите представляват шарените квадратчета на всяка една страна на кубчето.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="space">
  <div class="cube">
    <div class="side" id="side-one">
      <ul>
	<li class="col2"></li>
	<li class="col5"></li>
	<li class="col6"></li>
	<li class="col3"></li>
	<li class="col4"></li>
	<li class="col5"></li>
	<li class="col5"></li>
	<li class="col2"></li>
	<li class="col3"></li>
      </ul>
    </div>
    //...общо шест div-а с class="side" и id със съотвения номер на страната на кубчето
  </div>
</div>

Страните на моето кубче са 300рх. За да не се изместват взаимно и да ни е по-лесно изграждане на 3D, трябва да са а абсолютна позиция. Поради тази причина Родителя с клас class=”cube” ще има следен css:

1
2
3
4
5
.cube {
  width: 300px;
  height: 300px;
  position: relative;
}

Стените на кубчето, както споменахме, ще имат абсолютна позиция и ще са също със размери 300рх. За да се виждат divovete представящи стените на кубчето от двете страни, незабравяйте да добавите visibility пропърти.

1
2
3
4
5
6
7
8
9
10
.side {
  width: 300px;
  height: 300px;
  position: absolute;
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  -o-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
}

всяка стена на кубчето има 9 цветни квадрата, които в нашия случай са <li>. Ще им сложим и свойство float, което при добре нагласени размери на квадратчетата и стените на кубчето, ще се погрижи за правилните позиции на <li>-тата.

1
2
3
4
5
6
7
8
9
10
11
12
.side li{
  width: 100px;
  height: 100px;
  float: left;
}
 
//зачистване na пропъртито float на <li> е следно
side:after {
  content: "";
  display: block;
  clear: both
}

определете цветове на класовете на <li>, например:

1
2
3
.col1{
  background-color: #FFF;
}

2.Как да построим 3D кубче?

Какво построихме дотук? Създадохме 6 стени на нашето кубче, които се препокриват – в момента са една върху друга. Сега ще завъртим всичките стени на 90 градуса в различни посоки и по различни оси от 3D пространство – x, y и z. Ротацията на страните ще се осъществява в центъра на всяка от страните, заради това ще трябва да прибавим и преместване на всяка страна, на разтояние равно на а/2 , където “а” е страната на кубчето (в нашия случай 300рх/2=150рх). Можеби малко по-разбираемо е обеснено на картинката.
rotate and move the sides
Тъй като една от стените на кубчето е успоредна с първоначаната позиция и лицевата страна, нея няма нужда да я ротейтваме. CSS код например на задната стена ще изглежда по следния начин:

1
2
3
4
5
6
7
.cube .one{
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
  -o-transform: rotateY(180deg) translateZ(150px);
  -ms-transform: rotateY(180deg) translateZ(150px);
  transform: rotateY(180deg) translateZ(150px);
}

където rotateY(180deg) е ротация около ос “y” с 180 градуса, а translateZ(150рх) е преместване в посоката на ос “z” със 150рх. В случая ос “z” е според новата (ротейтната) позиция – от това може да направим заключение, че ако първо правим ротация, то тогава преместване на всяка една от стените ще бъде по ос “z”. Има една особеност пти задаването на ротацията а това е посоката. При ос x се прилага правилото на лявата ръка а при ос y правилото на дясната.

Позиция на лявата страна ще бъде определна по следния начин

1
2
3
4
5
6
7
.cube .two{
  -webkit-transform: rotateY(-90deg) translateZ(150px);
  -moz-transform: rotateY(-90deg) translateZ(150px);
  -o-transform: rotateY(-90deg) translateZ(150px);
  -ms-transform: rotateY(-90deg) translateZ(150px);
  transform: rotateY(-90deg) translateZ(150px);
}

Следвайки този принцип може вече да изградите цялото 3D кубче, като завъртвате всяка една от стените по подходящ начин, и я премествате със 150рх.
3.Анимирана ротация
Ако сте се справили със предишната стъпка – изграждане на 3D кубче, то анимацията ще е за вас вече по-лесна, понеже в тази стъпка ще повторим стъпката 2. с тази разлика, че няма да въртим отделни стени, а цялото кубче. За да има и движещ се ефект, ще го направим с помощта на CSS3 пропърти “animation”. Повече за него може да научите на w3school. Айде, да раздвижим кубчето :о) Към клас .cube добавете следни пропъртита:

1
2
3
4
5
6
7
8
9
10
11
12
13
.cube {
-webkit-animation-name: rotate;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
 
-moz-animation-name: rotate;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}

С това определихме особености на даден ефект, като името му, продължителност като време, промяна на скорост и други. Самата анимация ще зададем със следните редове CSS код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@-webkit-keyframes rotate{
 30%{
    -webkit-transform: rotateX(100deg) rotateY(-140deg); 
  }
  60%{
    -webkit-transform: rotateX(350deg) rotateY(-140deg) rotateZ(160deg); 
  }
  100%{
    -webkit-transform: rotateX(180deg) rotateY(430deg) rotateZ(40deg);
  }
}
@-moz-keyframes rotate{
  30%{
    -moz-transform: rotateX(100deg) rotateY(-140deg); 
  }
  60%{
    -moz-transform: rotateX(350deg) rotateY(-140deg) rotateZ(160deg); 
  }
  100%{
    -moz-transform: rotateX(180deg) rotateY(430deg) rotateZ(40deg);
  }
}

100% означава крайната позиция на анимация, което съответства с 10-те секунди които определихме при задаването на анимацията. Съответно 30% описва каква ще е позицията на кубчето в 30% от 10-те секунди. Състоянието между зададени позици, ще се променя плавно – по този начин кубчето плавно ще преминава от една позиция, описана в 30%-те процента, към друга позиция, описана в 60% и т.н.
Допълнително може да добавите и разни други ефекти, както и бордери на цветните квадратчета. При бордерите не забравяйте, че пропъртито width, не включва нито падинги, нито марджини, нито бордери, такаче ако решите да правите бордер, трябва да намалите width, иначе ще ви се разместят квадратчета пордаи float който им зададохме.
Приятно откриване на новите възможности на CSS3 :о)