You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
978 B
53 lines
978 B
4 years ago
|
html{
|
||
|
|
perspective: 3000px;
|
||
|
|
/*perspective-origin: 50% 50%;*/
|
||
|
|
}
|
||
|
|
.cube{
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
/*background-color: #bbffaa;*/
|
||
|
|
margin: 80px 65px;
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
transform: rotateX(45deg) rotateZ(45deg);
|
||
|
|
animation: rotate 10s infinite linear;
|
||
|
|
/*float: left;*/
|
||
|
|
/*position: absolute;*/
|
||
|
|
/*left: 500px;*/
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.cube>div{
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
opacity: 1;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
img{
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
.box1{
|
||
|
|
transform: rotateY(90deg) translateZ(50px);
|
||
|
|
}
|
||
|
|
.box2{
|
||
|
|
transform: rotateY(-90deg) translateZ(50px);
|
||
|
|
}
|
||
|
|
.box3{
|
||
|
|
transform: rotateX(90deg) translateZ(50px);
|
||
|
|
}
|
||
|
|
.box4{
|
||
|
|
transform: rotateX(-90deg) translateZ(50px);
|
||
|
|
}
|
||
|
|
.box5{
|
||
|
|
transform: rotateY(180deg) translateZ(50px);
|
||
|
|
}
|
||
|
|
.box6{
|
||
|
|
transform: rotateY(0deg) translateZ(50px);
|
||
|
|
}
|
||
|
|
@keyframes rotate {
|
||
|
|
from{
|
||
|
|
transform: rotateX(0) rotateZ(0);
|
||
|
|
}
|
||
|
|
to{
|
||
|
|
transform: rotateX(1turn) rotateZ(1turn);
|
||
|
|
}
|
||
|
|
}
|