<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">html{/* 设置3D元素距视图的距离 */perspective: 1800px;}.cube{width: 1080px;height: 1080px;background-color:rgba(0,0,0,0);margin: 800px auto;/* 设置3D效果 */transform-style: preserve-3d;/* 设置动画属性 */animation:rotate 10s infinite linear;}.cube > div{width: 1080px;height: 1080px;/* 为元素设置透明效果 */opacity: 1; /* 设置绝对定位 */position: absolute;} /* 消除照片之间的间距 */img{vertical-align: top;}/* 3D 转换Z轴的值为图片大小的一半 */.box1{transform: rotateY(90deg) translateZ(540px);}.box2{transform: rotateY(-90deg) translateZ(540px);}.box3{transform: rotateX(90deg) translateZ(540px);}.box4{transform: rotateX(-90deg) translateZ(540px);}.box5{transform:rotateY(180deg) translateZ(540px);}.box6{transform: rotateY(0deg) translateZ(540px);}@keyframes rotate{from{transform: rotateX(0) rotateZ(0);}to{transform: rotateX(1turn) rotateZ(1turn);}}</style></head><body><!-- 创建一个外部容器 --><div class="cube"><!-- 引入图片 --><div class="box1"><img src="img/01.jpg"></div><div class="box2"><img src="img/02.jpg"></div><div class="box3"><img src="img/03.jpg"></div><div class="box4"><img src="img/04.jpg"></div><div class="box5"><img src="img/05.jpg"></div><div class="box6"><img src="img/06.jpg"></div></div></body></html>
注意：
1.选择同样大小的图片
2.3D 转换Z轴的值为图片大小的一半
感想：
学习前端的课程也有一段时间了，能力还没有达到预期的标准，希望自己能以更大的决心努力前行。迷茫和孤独每个阶段都会有，昂首挺胸的走过去就完事了。
