先看一下效果动态图
代码
HTML
HTML中的图片来自百度图片，大家可以直接替换成自己喜欢的图片。，主要的是CSS的导入不要弄错了，不然不会显示出来效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS动画</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="main">
<div class="cubebox">
<ul class="cube">
<li>
<img src="https://img2.baidu.com/it/u=2265174136,3258085177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312" alt="">
</li>
<li>
<img src="https://img0.baidu.com/it/u=3590272806,4057802992&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=468" alt="">
</li>
<li>
<img src="https://img0.baidu.com/it/u=2684195388,1892017431&fm=253&fmt=auto&app=120&f=JPEG?w=786&h=494" alt="">
</li>
<li>
<img src="https://img1.baidu.com/it/u=637136511,2252791011&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281" alt="">
</li>
<li>
<img src="https://img2.baidu.com/it/u=860939803,3087392249&fm=253&fmt=auto&app=120&f=JPEG?w=820&h=512" alt="">
</li>
<li>
<img src="https://img2.baidu.com/it/u=4169107668,201424208&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
</li>
</ul>
<!-- 大正方体 -->
<ul class="cube bigcube">
<li>
<img src="https://img2.baidu.com/it/u=4169107668,201424208&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
</li>
<li>
<img src="https://img2.baidu.com/it/u=860939803,3087392249&fm=253&fmt=auto&app=120&f=JPEG?w=820&h=512" alt="">
</li>
<li>
<img src="https://img1.baidu.com/it/u=637136511,2252791011&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281" alt="">
</li>
<li>
<img src="https://img0.baidu.com/it/u=2684195388,1892017431&fm=253&fmt=auto&app=120&f=JPEG?w=786&h=494" alt="">
</li>
<li>
<img src="https://img0.baidu.com/it/u=3590272806,4057802992&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=468" alt="">
</li>
<li>
<img src="https://img2.baidu.com/it/u=2265174136,3258085177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312" alt="">
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
CSS文件与HTML文件为同级目录，并且命名为style.css，背景图片（background)的图片这里没有使用网络上的图片，大家可以也在同级目录下保存一张图片，命名为bg.png即可，也可以通过控制CSS属性animation的秒数来控制转动速度和transition的秒数来控制正方体的分开速度
*{
padding: 0;
margin: 0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
background: url(./bg.png)no-repeat;
background-size: 100%;
}
.main{
width: 100%;
height: 100%;
perspective: 800px;
}
.cubebox{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
transform-style: preserve-3d;
}
.cube{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(45deg);
animation: move 8s linear infinite;
}
.bg{
width: 100%;
height: 100%;
object-fit: fill;
}
.cube li{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 1s ease-in-out;
}
.cube li img{
display: block;
width: 100%;
height: 100%;
/* border-radius: 50%; */
opacity:0.8;
}
.bigcube li img{
opacity: 1;
}
.cube li:nth-child(1){
transform: rotateX(0deg) translateZ(50px);
}
.cube li:nth-child(2){
transform: rotateX(180deg) translateZ(50px) rotateZ(180deg);
}
.cube li:nth-child(3){
transform: rotateX(-90deg) translateZ(50px);
}
.cube li:nth-child(4){
transform: rotateX(90deg) translateZ(50px);
}
.cube li:nth-child(5){
transform: rotateY(-90deg) translateZ(50px) ;
}
.cube li:nth-child(6){
transform: rotateY(90deg) translateZ(50px);
}
.bigcube{
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
.bigcube li:nth-child(1){
transform: rotateX(0deg) translateZ(100px);
}
.bigcube li:nth-child(2){
transform: rotateX(180deg) translateZ(100px) rotateZ(180deg) ;
}
.bigcube li:nth-child(3){
transform: rotateX(-90deg) translateZ(100px);
}
.bigcube li:nth-child(4){
transform: rotateX(90deg) translateZ(100px);
}
.bigcube li:nth-child(5){
transform: rotateY(-90deg) translateZ(100px) ;
}
.bigcube li:nth-child(6){
transform: rotateY(90deg) translateZ(100px);
}
@keyframes move{
0%{
transform: rotateX(-13deg) rotateY(0deg);
}
100%{
transform: rotateX(-13deg) rotateY(360deg);
}
}
.bigcube:hover li:nth-child(1){
transform: rotateX(0deg) translateZ(200px) scale(1.1);
}
.bigcube:hover li:nth-child(2){
transform: rotateX(180deg) translateZ(200px) rotateZ(180deg) scale(1.1);
}
.bigcube:hover li:nth-child(3){
transform: rotateX(-90deg) translateZ(200px) scale(1.1);
}
.bigcube:hover li:nth-child(4){
transform: rotateX(90deg) translateZ(200px) scale(1.1);
}
.bigcube:hover li:nth-child(5){
transform: rotateY(-90deg) translateZ(200px) scale(1.1);
}
.bigcube:hover li:nth-child(6){
transform: rotateY(90deg) translateZ(200px) scale(1.1);
}
最后
这里面采集得图片只有背景的是来自本地的，其它的是来自网页，代码可直接复制使用。可以换成你喜欢的图片，当然也可以添加一些文字描述在里面，看各位小伙伴的需要了。本次CSS的分享到此结束，感谢观看
