效果图

知识点：

perspective 透视效果transform-style：preserve-3d 3D呈现效果 （添加在父类）animation：name time infinite(动画无限循环播放)transform：rotate translate

通过个给

HTML代码

<div class="abc"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

CSS代码

<style>body {/* 透视加在爷爷级 */perspective: 800px;}.abc {/* 3D呈现加在爸爸级 */transform-style:preserve-3d;position: relative;width: 200px;height: 200px;margin: 200px auto;/* 加载动画效果 id---meinv10s一个循环linear---线性过渡 动画infinite---无限循环播放动画*/animation: meinv 10s linear infinite;}.abc:hover {/* 给.abc加上伪类效果，当获得焦点时，动画会暂停播放，失去焦点后，动画继续播放 */animation-play-state: paused;}.abc div {position: absolute;top: 0;left: 0;background: url(./img/wmen.png) round;width: 100%;height: 100%;}@keyframes meinv {0% {/* 给动画添加旋转效果 开始位置时为Y轴的0度 */transform: rotateY(0);}100% {/* 给动画添加旋转效果 结束位置时为Y轴的360度 */transform: rotateY(360deg);}}/* 先调好每张图片的朝向角度然后摆放各个图片的位置 距离中心点的Z轴为400px */.abc div:nth-child(1) {transform: translateZ(300px) ;}.abc div:nth-child(2) {transform:rotateY(60deg) translateZ(300px);}.abc div:nth-child(3) {transform:rotateY(120deg) translateZ(300px);}.abc div:nth-child(4) {transform:rotateY(180deg) translateZ(300px);}.abc div:nth-child(5) {transform:rotateY(240deg) translateZ(300px);}.abc div:nth-child(6) {transform:rotateY(300deg) translateZ(300px);}.abc div:nth-child(7) {background: url(./img/元龙.png) round;} </style>