<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
background-color: #2f3542;
}
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.cube {
width: 250px;
height: 250px;
transform-style: preserve-3d;
animation: rotate-cobe 10s ease-in-out infinite;
}
.cube>div {
width: 250px;
height: 250px;
background-size: cover;
background-position: center center;
opacity: 0.8;
position: absolute;
box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
}
/* 前 */
.cube .img1 {
background-image: url("https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00323-3881.jpg");
transform: translateZ(125px);
}
/* 右 */
.cube .img2 {
background-image: url("https://img0.baidu.com/it/u=3607416692,1659289502&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=750");
transform: rotateY(90deg) translateZ(125px);
}
/* 左 */
.cube .img3 {
background-image: url("https://img2.baidu.com/it/u=667685406,1155663261&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500");
transform: rotateY(-90deg) translateZ(125px);
}
/* 下 */
.cube .img4 {
background-image: url("https://img2.baidu.com/it/u=1547725493,4110294476&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500");
transform: rotateX(90deg) translateZ(125px);
}
/* 上 */
.cube .img5 {
background-image: url("https://img1.baidu.com/it/u=2345344959,2598464592&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313");
transform: rotateX(-90deg) translateZ(125px);
}
/* 后 */
.cube .img6 {
background-image: url("https://img1.baidu.com/it/u=475796613,1666623793&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641");
transform: rotateY(180deg) translateZ(125px);
}
@keyframes rotate-cobe {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
20% {
/* 右边图片 */
transform: rotateY(-90deg);
}
40% {
/* 上 */
transform: rotateX(-90deg);
}
60% {
/* 左 */
transform: rotateY(90deg);
}
80% {
/* 下 */
transform: rotate(90deg);
}
100% {
transform: rotateX(0deg) rotateY(0deg);
}
}
</style>
</head>
<body>
<main>
<div class="cube">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
<div class="img5"></div>
<div class="img6"></div>
</div>
</main>
</body>
</html>
