Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css3 » Kub-na-css3

Куб на CSS3

куб на css3
Сегодня продолжим проделки на CSS3 и будем делать куб. Для создания нашего куба нам потребуется свойство трансформации transform и метод skew(x,y), который позволяет скосить элемент на указанное количество градусов по горизонтали (x) и по вертикали (у).

Для начала создадим 3 блока с помощью тега div:


 <div id="block1"></div>
&nbsp;
<div id="block2"></div>
&nbsp;
<div id="block3"></div>

 

Пропишем стили для наших блоков, используя трансформацию для 2 и 3 блоков:


#block1 {
position:absolute;
    top:150px;
    left:150px;
width:150px;
height:150px;
border:1px #000 solid;
background:#4e5ccc;
z-index:30;
}
#block2 {
position:absolute;
    top:100px;
    left:172px;
    border:1px #000 solid;
background:#7A005C;  
width:150px;
height:50px;
transform:skew(-40deg,0deg);
-o-transform:skew(-40deg,0deg); 
-webkit-transform:skew(-40deg,0deg); 
-moz-transform:skew(-40deg,0deg); 
-ms-transform:skew(-40deg,0deg);
z-index:20;
}
#block3 {
position:absolute;
    top:128px;
    left:300px;
    border:1px #000 solid;    
background:#4e8549;   
width:45px;
height:144px;
transform:skew(0deg,-50deg);
-o-transform:skew(0deg,-50deg); 
-webkit-transform:skew(0deg,-50deg); 
-moz-transform:skew(0deg,-50deg); 
-ms-transform:skew(0deg,-50deg);
z-index:10;
}

В результате должен получиться вот такой вот кубик.

Анимация для куба

Добавим немного анимации для нашего кубика. В данном случае сделаем так, чтобы при выделении верхней и нижней грани куба они открывались (2 и 3 блоки), а при наведении на 1-ый блок он изменял свой цвет. Для этого также будет использовать метод трансформации skew(x,y) и новый метод CSS3 — linear-gradient или по-русски «линейный градиент», который указывается в свойстве background.
Код CSS будет следующим:


@keyframes anim {
from {width:150px;
height:50px;
transform:skew(-40deg,0deg);
-o-transform:skew(-40deg,0deg);
-webkit-transform:skew(-40deg,0deg); 
-moz-transform:skew(-40deg,0deg); 
-ms-transform:skew(-40deg,0deg);
border:1px #000 solid;
position:absolute;
    top:100px;
    left:172px;}
to {width:150px;
height:150px;
transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg);
-webkit-transform:skew(0deg,0deg); 
-moz-transform:skew(0deg,0deg); 
-ms-transform:skew(0deg,0deg);
border:1px #000 solid;
position:absolute;
    top:0px;
    left:150px;}
}
@-moz-keyframes anim {
from {width:150px;
height:50px;
transform:skew(-40deg,0deg);
-o-transform:skew(-40deg,0deg); 
-webkit-transform:skew(-40deg,0deg); 
-moz-transform:skew(-40deg,0deg); 
-ms-transform:skew(-40deg,0deg);
border:1px #000 solid;
position:absolute;
    top:100px;
    left:172px;}
to {width:150px;
height:150px;
transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg); 
-webkit-transform:skew(0deg,0deg); 
-moz-transform:skew(0deg,0deg); 
-ms-transform:skew(0deg,0deg);
border:1px #000 solid;
position:absolute;
    top:0px;
    left:150px;}
}
@-webkit-keyframes anim {
from {width:150px;
height:50px;
transform:skew(-40deg,0deg);
-o-transform:skew(-40deg,0deg); 
-webkit-transform:skew(-40deg,0deg); 
-moz-transform:skew(-40deg,0deg); 
-ms-transform:skew(-40deg,0deg);
border:1px #000 solid;
position:absolute;
    top:100px;
    left:172px;}
to {width:150px;
height:150px;
transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg); 
-webkit-transform:skew(0deg,0deg); 
-moz-transform:skew(0deg,0deg); 
-ms-transform:skew(0deg,0deg);
border:1px #000 solid;
position:absolute;
    top:0px;
    left:150px;}
}
@keyframes anim2 {
    from {position:absolute;
    top:128px;
    left:300px;
    border:1px #000 solid; 
width:45px;
height:144px;
transform:skew(0deg,-50deg);
-o-transform:skew(0deg,-50deg); 
-webkit-transform:skew(0deg,-50deg); 
-moz-transform:skew(0deg,-50deg); 
-ms-transform:skew(0deg,-50deg);
}
to {position:absolute;
    top:150px;
    left:300px;
    border:1px #000 solid; 
width:150px;
height:150px;
transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg); 
-webkit-transform:skew(0deg,0deg); 
-moz-transform:skew(0deg,0deg); 
-ms-transform:skew(0deg,0deg);
}
}
@-moz-keyframes anim2 {
    from {position:absolute;
    top:128px;
    left:300px;
    border:1px #000 solid; 
width:45px;
height:144px;
transform:skew(0deg,-50deg);
-o-transform:skew(0deg,-50deg); 
-webkit-transform:skew(0deg,-50deg); 
-moz-transform:skew(0deg,-50deg); 
-ms-transform:skew(0deg,-50deg);
}
to {position:absolute;
    top:150px;
    left:300px;
    border:1px #000 solid; 
width:150px;
height:150px;
transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg); 
-webkit-transform:skew(0deg,0deg); 
-moz-transform:skew(0deg,0deg); 
-ms-transform:skew(0deg,0deg);
}
}

@-webkit-keyframes anim2 {
from {position:absolute;
    top:128px;
    left:300px;
    border:1px #000 solid; 
width:45px;
height:144px;
transform:skew(0deg,-50deg);
-o-transform:skew(0deg,-50deg); 
-webkit-transform:skew(0deg,-50deg); 
-moz-transform:skew(0deg,-50deg); 
-ms-transform:skew(0deg,-50deg);
}
to {position:absolute;
    top:150px;
    left:300px;
    border:1px #000 solid; 
width:150px;
height:150px;
transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg); 
-webkit-transform:skew(0deg,0deg); 
-moz-transform:skew(0deg,0deg); 
-ms-transform:skew(0deg,0deg);
}
}
@keyframes anim3 {
    0% {background:#4e5ccc;
}
30%{background:linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
background:-webkit-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%); 
background:-o-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%); 
background:-moz-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
background:-ms-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
}
60% {background:linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
background:-webkit-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%); 
background:-o-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%); 
background:-moz-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
background:-ms-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
}
100% {background:linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
background:-webkit-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%); 
background:-o-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%); 
background:-moz-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
background:-ms-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
}
}
@-webkit-keyframes anim3 {
    0% {background:#4e5ccc;
}
30%{background:linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
background:-webkit-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%); 
background:-o-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%); 
background:-moz-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
background:-ms-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
}
60% {background:linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
background:-webkit-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%); 
background:-o-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%); 
background:-moz-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
background:-ms-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
}
100% {background:linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
background:-webkit-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%); 
background:-o-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%); 
background:-moz-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
background:-ms-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
}
}
@-moz-keyframes anim3 {
0% {background:#4e5ccc;
}
30%{background:linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
background:-webkit-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%); 
background:-o-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%); 
background:-moz-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
background:-ms-linear-gradient(left,white 0%,#4e5ccc 50%,black 100%);
}
60% {background:linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
background:-webkit-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%); 
background:-o-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%); 
background:-moz-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
background:-ms-linear-gradient(left,white 0%,#7A005C 50%,#4e5ccc 100%);
}
100% {background:linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
background:-webkit-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%); 
background:-o-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%); 
background:-moz-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
background:-ms-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
}
}
#block1 {
position:absolute;
    top:150px;
    left:150px;
width:150px;
height:150px;
border:1px #000 solid;
background:#4e5ccc;
z-index:30;
}
#block1:hover{
    animation:anim3 1s;
-moz-animation:anim3 1s;
-webkit-animation:anim3 1s;
background:linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
background:-webkit-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%); 
background:-o-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%); 
background:-moz-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
background:-ms-linear-gradient(left,white 0%,#4e8549 50%,#7A005C 100%);
}
#block2 {
position:absolute;
    top:100px;
    left:172px;
    border:1px #000 solid;
background:#7A005C;  
width:150px;
height:50px;
transform:skew(-40deg,0deg);
-o-transform:skew(-40deg,0deg); 
-webkit-transform:skew(-40deg,0deg); 
-moz-transform:skew(-40deg,0deg); 
-ms-transform:skew(-40deg,0deg);
z-index:20;
}
#block2:hover{
animation:anim 3s;
-moz-animation:anim 3s;
-webkit-animation:anim 3s;
width:150px;
height:150px;
transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg); 
-webkit-transform:skew(0deg,0deg); 
-moz-transform:skew(0deg,0deg);
-ms-transform:skew(0deg,0deg);
border:1px #000 solid;
position:absolute;
    top:0px;
    left:150px;
    z-index:20;
}
#block3 {
position:absolute;
    top:128px;
    left:300px;
    border:1px #000 solid;
    
background:#4e8549;   
width:45px;
height:144px;
transform:skew(0deg,-50deg);
-o-transform:skew(0deg,-50deg); 
-webkit-transform:skew(0deg,-50deg); 
-moz-transform:skew(0deg,-50deg); 
-ms-transform:skew(0deg,-50deg);
z-index:10;
}
#block3:hover {
animation:anim2 3s;
-moz-animation:anim2 3s;
-webkit-animation:anim2 3s;
position:absolute;
    top:150px;
    left:300px;
    border:1px #000 solid; 
width:150px;
height:150px;
transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg); 
-webkit-transform:skew(0deg,0deg); 
-moz-transform:skew(0deg,0deg); 
-ms-transform:skew(0deg,0deg);
}

Результат можно увидеть здесь. Все бы было хорошо, но наш куб не имеет задней стенки и из-за этого кажется пустым. Чтобы это исправить давайте добавим ещё один блок:


​<div id="block1"></div>
&nbsp;
<div id="block2"></div>
&nbsp;
<div id="block3"></div>
&nbsp;
<div id="block4"></div>

Как видите для каждого блока я указал свойство z-index, для того чтобы 4-ый блок был виден только при анимации. Конечный результат можно посмотреть здесь.

Источник: http://3wcom.ru/
Автор:nightgremlin(Александр Побединский)


наверх