body {
display
: flex;
height
:
100
vh;
justify-
content
:
center
;
align-items:
center
;
background
:
#1e6f0a
;
}
.cube {
width
:
200px
;
height
:
200px
;
position
:
relative
;
transform-style: preserve
-3
d;
animation: rotate
10
s linear infinite;
}
img {
width
:
100%
;
height
:
100%
;
object-fit: cover;
}
.box {
width
:
100%
;
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
opacity:
0.9
;
}
.box
1
{
transform: translateZ(
100px
);
}
.box
2
{
transform: rotateY(
90
deg) translateX(
100px
);
transform-origin:
right
;
}
.box
3
{
transform: rotateY(
180
deg) translateZ(
100px
);
}
.box
4
{
transform: rotateY(
-90
deg) translateX(
-100px
);
transform-origin:
left
;
}
.box
5
{
transform: rotateX(
-90
deg) translateY(
-100px
);
transform-origin:
top
;
}
.box
6
{
transform: rotateX(
90
deg) translateY(
100px
);
transform-origin:
bottom
;
}
@keyframes rotate {
0%
,
100%
{
transform: rotate(
0
deg);
}
20%
{
transform: rotateY(
90
deg) rotateZ(
90
deg);
}
40%
{
transform: rotateY(
180
deg) rotateZ(
-90
deg);
}
60%
{
transform: rotateY(
270
deg) rotateZ(
90
deg);
}
80%
{
transform: rotateY(
360
deg) rotateZ(
-90
deg);
}
}