<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于CSS3的3D立方体旋转动画</title>
<style>
/* 3d旋转样式 */
.cub {
2.5rem;
height: 2.5rem;
position: fixed;
left: 3%;
top: 3.75rem;
}
#cube {
animation: 6s spin linear infinite;
height: 100%;
position: absolute;
transform-style: preserve-3d;
100%;
}
#cube * {
display: block;
height: 2.5rem;
position: absolute;
2.5rem;
cursor: pointer;
}
.cub:hover {
6.25rem;
height: 6.25rem;
}
.cub:hover #cube * {
6.25rem;
height: 6.25rem;
}
#cube *:before {
content: '';
height: 100%;
position: absolute;
100%;
}
.cub:hover #back {
transform: rotateX(180deg) translateZ(5rem);
}
.cub:hover #front {
transform: rotateY(0deg) translateZ(5rem);
}
.cub:hover #bottom {
transform: rotateX(-90deg) translateZ(5rem);
}
.cub:hover #left {
transform: rotateY(-90deg) translateZ(5rem);
}
.cub:hover #right {
transform: rotateY(90deg) translateZ(5rem);
}
.cub:hover #top {
transform: rotateX(90deg) translateZ(5rem);
}
/* */
#back {
transform: rotateX(180deg) translateZ(1.875rem);
}
#front {
transform: rotateY(0deg) translateZ(1.875rem);
}
#bottom {
transform: rotateX(-90deg) translateZ(1.875rem);
}
#left {
transform: rotateY(-90deg) translateZ(1.875rem);
}
#right {
transform: rotateY(90deg) translateZ(1.875rem);
}
#top {
transform: rotateX(90deg) translateZ(1.875rem);
}
@keyframes spin {
0% {
transform: translateZ(6.25rem) rotateX(0) rotateY(0deg);
}
100% {
transform: translateZ(6.25rem) rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<!-- 3d旋转图片div -->
<div class="cub">
<ul id="cube">
<li id="back">
<img src=" ">
</li>
<li id="bottom">
<img src=" ">
</li>
<li id="front">
<img src=" ">
</li>
<li id="left">
<img src=" ">
</li>
<li id="right">
<img src=" ">
</li>
<li id="top">
<img src=" ">
</li>
</ul>
</div>
</body>
</html>
https://www.cnblogs.com/2979100039-qq-con/p/13367091.html