<div class="scence">
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="back"></div>
<div class="front"></div>
</div>
</div>
body {
background-color: #ff9152;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
perspective: 20em;
perspective-origin: 50% calc(50% - 10em);
}
.scence {
position: relative;
transform-style: preserve-3d;
animation: rotateX 7s infinite linear;
}
.box {
height: 120px;
width: 120px;
position: relative;
transform-style: preserve-3d;
animation: rotateY 5s infinite linear;
}
.top,
.bottom,
.left,
.right,
.front,
.back {
position: absolute;
height: 120px;
transform-style: preserve-3d;
width: 120px;
background-color: rgba(20, 116, 241, 0.281);
background-size:cover;
box-sizing:border-box;
border: 5px solid #fff;
}
.front {
transform: translateZ(3.7rem);
background-image: url("https://cdn140.picsart.com/355182439052201.jpg?to=crop&type=webp&r=310x310&q=75");
background-size:cover;
}
.right {
transform: rotateY(270deg) translateZ(3.7rem);
background-image: url("http://pm1.narvii.com/7533/be35ca4f98dd1790e03d932bc70c8d3588359105r1-281-281v2_uhq.jpg")
}
.back {
transform: rotateY(180deg) translateZ(3.7rem);
background-image:url("https://cdn.costumewall.com/wp-content/uploads/2018/09/sasuke-uchiha.jpg");
background-size:cover;
}
.left {
transform: rotateY(90deg) translateZ(3.7rem);
background-image:url("https://i1.sndcdn.com/avatars-000736438537-zvc9fi-t240x240.jpg");
background-size:cover;
}
.top {
transform: translateY(-50%) rotateX(90deg);
scaleY(-1);
background-image:url("https://i.pinimg.com/originals/c2/c6/87/c2c687c78da549431b8903e0aad90184.png");
background-size:cover;
}
.bottom {
bottom: -120px;
transform: translateY(-50%) rotateX(90deg) scaleY(-1);
background-image: url("https://static.wikia.nocookie.net/08b81b8e-00c6-4f69-83c6-94bfc79f05c7/scale-to-width/755");
background-size:cover;
}
@keyframes rotateX{
25% {
transform: rotateX(-180deg);
}
50% {
transform: rotateY(-360deg);
}
70%{
transfrom: rotateX(-180deg)
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.