<!DOCTYPE html>
<html lang="en">
(相关资料图)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
transform-style: preserve-3d;
transform: rotate3d(1, 1, 1, 45deg);
}
.box {
width: 200px;
height: 200px;
background-color: #fff;
position: relative;
transform-style: preserve-3d;
animation: cuberotate 20s linear infinite;
}
.box>div {
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
position: absolute;
}
.box>div>img {
width: 200px;
height: 200px;
}
.front {
background-color: #ff0000;
transform: translate3d(0px, 0px, 100px);
}
.back {
background-color: #77ff00;
transform: translate3d(0px, 0px, -100px) rotateY(180deg);
}
.left {
background-color: #00fff7;
transform: translate3d(-100px, 0, 0) rotateY(-90deg);
}
.right {
background-color: #2f00ff;
transform: translate3d(100px, 0, 0) rotateY(90deg);
}
.top {
background-color: #ff00dd;
transform: translate3d(0, -100px, 0) rotateX(90deg) rotateZ(180deg);
}
.bottom {
background-color: #e5ff00;
transform: translate3d(0, 100px, 0) rotateX(-90deg);
}
@keyframes cuberotate {
0% {
transform: rotate3d(1, 1, -1, 0deg);
}
50% {
transform: rotate3d(1, 1, -1, 180deg);
}
100% {
transform: rotate3d(1, 1, -1, 360deg);
}
}
.boxbottom {
height: 15px;
width: 80px;
border-radius: 50%;
background-color: #cfcfcf;
position: absolute;
top: 73%;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 5px 5px #838383;
}
</style>
</head>
<body>
<div class="box1">
<div class="box">
<div class="front">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6yAjzk82SVLlIgFNX_YudQHaH8?w=197&h=211&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
</div>
<div class="back">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.xsQ28STeDN6062uurXvNJgHaHa?w=211&h=211&c=7&r=0&o=5&dpr=1.3&pid=1.7"> </div>
<div class="left">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.zeJ54EgvR16Gu7xTsiDRdwHaJQ?w=157&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7">
</div>
<div class="right">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.NLMA2YVTC5Jfta3pNDHOGAHaHR?w=168&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
</div>
<div class="top">
<img src="https://tse2-mm.cn.bing.net/th?q=%e5%91%a8%e6%9d%b0%e4%bc%a6%e4%b8%93%e8%be%91%e5%9b%be%e7%89%87&w=120&h=120&c=1&rs=1&qlt=90&cb=1&dpr=1.3&pid=InlineBlock&mkt=zh-CN&cc=CN&setlang=zh-Hans&adlt=strict&t=1&mw=247">
</div>
<div class="bottom"> <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.XNe6nSKWOxb9fc4jAnhvNwHaHa?w=205&h=195&c=7&r=0&o=5&dpr=1.3&pid=1.7"> </div>
</div>
</div>
<div class="boxbottom">
</div>
</body>
</html>
