<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<style>
|
* {
|
box-sizing: border-box;
|
}
|
|
body {
|
margin: 0 auto;
|
|
width: 100px;
|
height: 100px;
|
|
perspective: 5000px;
|
}
|
|
.cube {
|
position: relative;
|
|
width: 100%;
|
height: 100%;
|
|
transform-style: preserve-3d;
|
|
transition: transform 1s;
|
|
animation-name: spin;
|
animation-duration: 3s;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes spin {
|
0% {
|
transform: rotateY(0deg);
|
}
|
|
100% {
|
transform: rotateY(360deg);
|
}
|
}
|
|
.cube div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
font-size: 25px;
|
|
width: 100px;
|
height: 100px;
|
|
position: absolute;
|
|
border: 1px solid white;
|
|
backface-visibility: hidden;
|
|
color: white;
|
}
|
|
.top {
|
transform: rotateX(90deg) translateZ(50px);
|
}
|
|
.bottom {
|
transform: rotateX(-90deg) translateZ(50px);
|
}
|
|
.left {
|
transform: rotateY(-90deg) translateZ(50px);
|
}
|
|
.right {
|
transform: rotateY(90deg) translateZ(50px);
|
}
|
|
.front {
|
transform: rotateY(0deg) translateZ(50px);
|
}
|
|
.back {
|
transform: rotateY(180deg) translateZ(50px);
|
}
|
|
|
</style>
|
</head>
|
<body>
|
<div class="cube">
|
<div class="front">3</div>
|
<div class="back">4</div>
|
<div class="right">5</div>
|
<div class="left">2</div>
|
<div class="top">1</div>
|
<div class="bottom">6</div>
|
</div>
|
</body>
|
</html>
|
