利用CSS在HTML页面实现3D旋转木马轮播图

实现效果

CSS代码

	<style>
        body {
   
            perspective: 1000px;
            background: url("images/body_bg.jpg"); /*背景图的url*/
            background-size: 100%;
        }

        .orderplay{
   
            margin-top: 27%;
        }
        section {
   
            width: 300px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;  /*让父盒子里面的子盒子以3D效果来显示*/
            animation: rotate3D 24s infinite;  /*设置旋转一圈所需的时间*/
        }

        section:hover {
       /*鼠标悬停在轮播图区域内时停止轮播*/
            cursor: pointer;
            animation-play-state: paused;
        }

        section div {
   
            width: 100%;
            height: 100%;
            background-size: cover;
            position: absolute;
            top: 0;
            left: 0;
        }
        
		/*匀速旋转*/
        @keyframes rotate3D {
   
            0%{
   transform: rotateY(0deg)}  /*rotateY()中的数是旋转角度*/
            8.3%{
   transform: rotateY(35deg)}
            16.6%{
   transform: rotateY(65deg)}
            24.9%{
   transform: rotateY(95deg)}
            33.2%{
   transform: rotateY(125deg)}
            41.5%{
   transform: rotateY(155deg)}
            49.8%{
   transform: rotateY(185deg)}
            58.1%{
   transform: rotateY(215deg)}
            66.4%{
   transform: rotateY(245deg)}
            74.7%{
   transform: rotateY(275deg)}
            83%{
   transform: rotateY(305deg)}
            91.3%{
   transform: rotateY(335deg)}
            100%{
   transform: rotateY(360deg)}
        }
        /*设置轮播图片的个数*/
        section div:nth-child(1) {
   
            transform: rotateY(0deg) translateZ(600px);/* Z 是旋转轮播图转轴半径，尺寸是不变的*/
        }
        section div:nth-child(2) {
   
            transform: rotateY(30deg) translateZ(600px);
        }
        section div:nth-child(3) {
   
            transform: rotateY(60deg) translateZ(600px);
        }
        section div:nth-child(4) {
   
            transform: rotateY(90deg) translateZ(600px);
        }
        section div:nth-child(5) {
   
            transform: rotateY(120deg) translateZ(600px);
        }
        section div:nth-child(6) {
   
            transform: rotateY(150deg) translateZ(600px);
        }
        section div:nth-child(7) {
   
            transform: rotateY(180deg) translateZ(600px);
        }
        section div:nth-child(8) {
   
            transform: rotateY(210deg) translateZ(600px);
        }
        section div:nth-child(9) {
   
            transform: rotateY(240deg) translateZ(600px);
        }
        section div:nth-child(10) {
   
            transform: rotateY(270deg) translateZ(600px);
        }
        section div:nth-child(11) {
   
            transform: rotateY(300deg) translateZ(600px);