@charset "utf-8";

#box{/*контейнер для куба*/
background-color:rgba(204,204,204,.5);/*фон*/
border-radius:5px;/*радиус округления краев*/
margin:.5em;/*внешние отступы*/
padding:2em;/*внутренние отступы*/
position:absolute;/*позиционирование абсолютное*/
z-index:1;/*слой 1*/
}
#wrapper{/*блок перспективы*/
-webkit-perspective:270px;/*перспектива вращения для хрома*/
-moz-perspective:270px;/*перспектива вращения для мозилы*/
-o-perspective:270px;/*перспектива вращения для оперы*/
-ms-perspective:270px;/*перспектива вращения для експлоера*/
-khtml-perspective:270px;/*перспектива вращения для конкуера*/
}
#cube{
position:relative;/*относительное позиционирование куба*/
width:90px;/*длина сторон куба*/
height:90px;/*высота сторон куба*/

transform-origin:50% 50% -45px;/*кординаты точки трансформации куба относительно центра x y z-половина грани куба*/
-webkit-transform-origin:50% 50% -45px;/*кординаты точки трансформации куба для хрома*/
-moz-transform-origin:50% 50% -45px;/*кординаты точки трансформации для мозилы*/
-o-transform-origin:50% 50% -45px;/*кординаты точки трансформации для оперы*/
-ms-transform-origin:50% 50% -45px;/*кординаты точки трансформации для експлоера*/
-khtml-transform-origin:50% 50% -45px;/*кординаты точки трансформации для конкуера*/

transform-style:preserve-3d;/*отображение в 3D*/
-webkit-transform-style:preserve-3d;/*отображение в 3D для хрома*/
-moz-transform-style:preserve-3d;/*отображение в 3D для мозилы*/
-o-transform-style:preserve-3d;/*отображение в 3D для оперы*/
-ms-transform-style:preserve-3d;/*отображение в 3D для експлоера*/
-khtml-transform-style:preserve-3d;/*отображение в 3D для конкуера*/
}
.side{/*стороны куба*/
width:90px;/*длина сторон куба*/
height:90px;/*высота сторон куба*/
background:radial-gradient(rgba(21,53,176,.5) 50%, 
rgba(50,126,213,.5)100%);/*радиальные градиенты и тени сторон куба*/
background:-webkit-radial-gradient(rgba(21,53,176,.5) 50%, 
rgba(50,126,213,.5)100%);/*для хрома*/
background:-moz-radial-gradient(rgba(21,53,176,.5) 50%, 
rgba(50,126,213,.5)100%);/*для мозилы*/
background:-o-(rgba(21,53,176,.5) 50%, 
rgba(50,126,213,.5)100%);/*для оперы*/
background:-ms-(rgba(21,53,176,.5) 50%, 
rgba(50,126,213,.5)100%);/*для експлоера*/
background:-khtml-(rgba(21,53,176,.5) 50%, 
rgba(50,126,213,.5)100%);/*для конкуера*/
position:absolute;/*абсолютное позиционирование сторон куба*/
border:1px solid #fff;/*белый бордюр*/
border-radius:5px;/*округление*/
font-size:1.2em;/*ширина шрифта на сторонах*/
color:#fff;/*цвет шрифта*/
line-height:90px;/*межстрочный интервал*/
text-align:center;/*выравнивание текста по центру*/
text-shadow:0 1px 3px rgba(0,0,0,.8);/*свойства тени текста*/
box-shadow:0 0 6px rgba(0,0,0,.9);/*свойства тени бокса*/

transform-origin:50% 50% -45px;/*кординаты точки трансформации x y z-половина грани куба*/
-moz-transform-origin:50% 50% -45px;/*кординаты точки трансформации для мозилы*/
-webkit-transform-origin:50% 50% -45px;/*кординаты точки трансформации для хрома*/
-o-transform-origin:50% 50% -45px;/*кординаты точки трансформации для оперы*/
-ms-transform-origin:50% 50% -45px;/*кординаты точки трансформации для експлоера*/
-khtml-transform-origin:50% 50% -45px;/*кординаты точки трансформации для конкуера*/
}
#side2{/*сторона 2 левая*/
transform:rotateY(90deg);/*вращение стороны по оси Y на 90 градусов*/
-moz-transform:rotateY(90deg);/*для мозилы*/
-webkit-transform:rotateY(90deg);/*для хрома*/
-o-transform:rotateY(90deg);/*для оперы*/
-ms-transform:rotateY(90deg);/*для експлоера*/
-khtml-transform:rotateY(90deg);/*для конкуера*/
}
#side3{/*сторона 3 правая*/
transform:rotateY(-90deg);/*вращение стороны по оси Y на -90 градусов*/
-moz-transform:rotateY(-90deg);/*для мозилы*/
-webkit-transform:rotateY(-90deg);/*хрома*/
-o-transform:rotateY(-90deg);/*для оперы*/
-ms-transform:rotateY(-90deg);/*для експлоера*/
-khtml-transform:rotateY(-90deg);/*для конкуера*/
}
#side4{/*сторона 4 нижняя*/
transform:rotateX(90deg);/*вращение стороны по оси x на 90 градусов*/
-moz-transform:rotateX(90deg);/*для мозилы*/
-webkit-transform:rotateX(90deg);/*для хрома*/
-o-transform:rotateX(90deg);/*для оперы*/
-ms-transform:rotateX(90deg);/*для експлоера*/
-khtml-transform:rotateX(90deg);/*для конкуера*/
}
#side5{/*сторона 5 верхняя*/
transform:rotateX(-90deg);/*вращение стороны по оси x на 90 градусов*/
-moz-transform:rotateX(-90deg);/*для мозилы*/
-webkit-transform:rotateX(-90deg);/*для хрома*/
-o-transform:rotateX(-90deg);/*для оперы*/
-ms-transform:rotateX(-90deg);/*для експлоера*/
-khtml-transform:rotateX(-90deg);/*для конкуера*/
}
#side6{/*сторона 6*/
transform:rotateY(180deg);/*вращение стороны по оси y на 180 градусов*/
-moz-transform:rotateY(180deg);/*для мозилы*/
-webkit-transform:rotateY(180deg);/*для хрома*/
-o-transform:rotateY(180deg);/*для оперы*/
-ms-transform:rotateY(180deg);/*для експлоера*/
-khtml-transform:rotateY(180deg);/*для конкуера*/
}