学了CSS的动画，仿照着自己做了一个3D旋转的小动画。先看看图片
这里是截图的图片，看不出来动态效果，可以把CSS和HTML复制下来直接放在文本编辑器中进行图片路径的修改
然后把格式转变成 .html 的就好了
视频演示链接：/6954580295748157987
下面是代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D旋转</title><link rel="icon" href="./image/logo.png"><style>body {perspective: 1500px;}section {position: relative;width: 261px;height: 450px;margin: 100px auto;transform-style: preserve-3d;/* animation: name duration timing-function delay iteration-count direction fill-mode; */animation: rotate 8s linear infinite;/* 图片路径 */background: url(image/dl.png)no-repeat;/* opacity: 0.9; */}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}section div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;/* background: url(image/xw.png)no-repeat; */opacity: 0.7;}section div:nth-child(2n) {/* 这里是外层的旋转图片路径 */background: url(image/xw.png)no-repeat;}section div:nth-child(2n+1) {/* 这里是外层旋转的图片路径 */background: url(image/ts.png)no-repeat;}section div:nth-child(1) {/* 在z轴上移动200px */transform: translateZ(300px);}section div:nth-child(2) {/* 在y轴上旋转60度，然后在z轴上移动300像素，下面类似 */transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}audio{border: none;}</style></head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section><!-- 这里是音频链接，不用理会 --><!-- <audio src="./image/Nothing's Gonna Change My Love For You - Westlife.flac" controls loop></audio> --></body></html>
