CSS 3.0特效轮播图-CFANZ编程社区

给大家分享一个用CSS 3.0实现的特效轮播图，效果如下：
CSS 3.0特效轮播图_前端开发
以下是代码实现，欢迎大家复制粘贴和收藏。
<!doctype html>
<html lang="zh-cn">

<head>
    <title>CSS 3.0特效轮播图</title>
    <meta charset="utf-8">
    <style>
        #stage {
            /*假定人眼到投射平面的距离，取值越大越远，取值越小越近*/
            perspective: 1000px;
            /*兼容性问题Chrome和Safari需要加前缀*/
            -webkit-perspective: 1000px;
        }

        #container {
            width: 1000px;
            height: 800px;
            /*border:1px solid #000;*/
            position: relative;
            margin: 100px auto;
            /*以X轴和Y轴为中心旋转元素*/
            transform: rotateX(-30deg) rotateY(0deg);
            /*定义如何在3D空间中呈现被嵌套的元素,flat为默认值，子元素不保留其3D位置,preserve-3d为子元素将保留其3d位置*/
            transform-style: preserve-3d;
            /*调用动画*/
            animation: scroll 8s linear infinite;
        }

        #container:hover {
            animation-play-state: paused;
        }

        #container div {
            position: absolute;
            top: 150px;
            left: 400px;
        }

        #container div:nth-child(1) {
            /*1号图像向前方移位300px*/
            transform: translateZ(300px);
        }

        #container div:nth-child(2) {
            /*2号图像旋转60deg,向前方移位300px*/
            transform: rotateY(60deg) translateZ(300px);
        }

        #container div:nth-child(3) {
            /*3号图像旋转60deg,向前方移位300px*/
            transform: rotateY(120deg) translateZ(300px);
        }

        #container div:nth-child(4) {
            /*4号图像旋转60deg,向前方移位300px*/
            transform: rotateY(180deg) translateZ(300px);
        }

        #container div:nth-child(5) {
            /*5号图像旋转60deg,向前方移位300px*/
            transform: rotateY(240deg) translateZ(300px);
        }

        #container div:nth-child(6) {
            /*6号图像旋转60deg,向前方移位300px*/
            transform: rotateY(300deg) translateZ(300px);
        }

        /*声明动画*/
        @keyframes scroll {
            0% {
                transform: rotateX(-30deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(-30deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="stage">
        <div id="container">
            <div>
                <img src="https://inews.gtimg.com/newsapp_bt/0/11853195062/1000" style="width:200px;">
            </div>
            <div>
                <img src="https://inews.gtimg.com/newsapp_bt/0/11853195062/1000" style="width:200px;">
            </div>
            <div>
                <img src="https://inews.gtimg.com/newsapp_bt/0/11853195062/1000" style="width:200px;">
            </div>
            <div>
                <img src="https://inews.gtimg.com/newsapp_bt/0/11853195062/1000" style="width:200px;">
            </div>
            <div>
                <img src="https://inews.gtimg.com/newsapp_bt/0/11853195062/1000" style="width:200px;">
            </div>
            <div>
                <img src="https://inews.gtimg.com/newsapp_bt/0/11853195062/1000" style="width:200px;">
            </div>
        </div>
    </div>
</body>

</html>