先来看一下效果图：
实现思路
先搭建基本结构<div class="stage"><div class="container"><img src="./images/car1.jpeg"/><img src="./images/car2.jpeg"/><img src="./images/car3.jpeg"/><img src="./images/car4.jpeg"/><img src="./images/car5.jpeg"/><img src="./images/car6.jpeg"/></div></div>
定义css动画函数
@keyframes rotating {0%{transform: translate(-50%, -50%) rotateY(0deg);}100%{transform: translate(-50%, -50%) rotateY(360deg);}}
设置css属性
最外层的div需要设置perspective(视距)属性，目的是能够产生视觉立体效果，它的值是眼睛和屏幕的距离：
.stage{perspective: 1200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
内层的div作为图片的容器，并且设置transform-style: preserve-3d，开启3d转换，并且应用上面定义的动画：
.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 270px;height: 180px;transform-style: preserve-3d;animation-name: rotating;animation-duration: 15s;animation-timing-function: linear;animation-iteration-count: infinite;animation-play-state: running;}
给每个img都设置对应的css属性：
.container img:nth-of-type(1){transform: rotateY(60deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(2){transform: rotateY(120deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(3){transform: rotateY(180deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(4){transform: rotateY(2400deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(5){transform: rotateY(300deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(6){transform: rotateY(360deg) translateX(300px) rotateY(90deg);}
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>旋转木马</title><style>@keyframes rotating {0%{transform: translate(-50%, -50%) rotateY(0deg);}100%{transform: translate(-50%, -50%) rotateY(360deg);}}.stage{perspective: 1200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 270px;height: 180px;transform-style: preserve-3d;animation-name: rotating;animation-duration: 15s;animation-timing-function: linear;animation-iteration-count: infinite;animation-play-state: running;}.container img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: all 0.3s;}.container img:hover{box-shadow: 0 0 8px 1px #24b4f3;}.container img:nth-of-type(1){transform: rotateY(60deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(2){transform: rotateY(120deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(3){transform: rotateY(180deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(4){transform: rotateY(2400deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(5){transform: rotateY(300deg) translateX(300px) rotateY(90deg);}.container img:nth-of-type(6){transform: rotateY(360deg) translateX(300px) rotateY(90deg);}</style></head><body><div class="stage"><div class="container"><img src="./images/car1.jpeg"/><img src="./images/car2.jpeg"/><img src="./images/car3.jpeg"/><img src="./images/car4.jpeg"/><img src="./images/car5.jpeg"/><img src="./images/car6.jpeg"/></div></div></body><script>const container = document.querySelector('.container');container.addEventListener('mouseenter',e=>{e.target.style.animationPlayState='paused'})container.addEventListener('mouseleave',e=>{e.target.style.animationPlayState='running'})</script></html>
