本篇文章探讨了HTML5+CSS3从入门到精通之利用CSS3渐变效果实现圆环旋转效果，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

* {
            margin: 0;
            padding: 0;
        }
       
        .stage {
            width: 200px;
            height: 130px;
            margin: 100px auto;
            position: relative;
            perspective: 1300px;
            perspective-origin: 100px -400px;
        }
       
        .stage ul {
            list-style: none;
            width: 100%;
            height: 100%;
        }
       
        img {
            backface-visibility: hidden;
        }
       
        #ring {
            width: 200px;
            height: 130px;
            position: absolute;
            top: 0;
            /*transform: rotateY(0deg);*/
            left: 0;
            transform-style: preserve-3d;
            transition: all 1s ease 0s;
        }
       
        .stage ul li {
            position: absolute;
            top: 0;
            left: 0;
            /*transform-origin: 30% 50%;*/
        }
       
        .stage ul li:nth-of-type(1) {
            transform: rotateY(0deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(2) {
            transform: rotateY(36deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(3) {
            transform: rotateY(72deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(4) {
            transform: rotateY(108deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(5) {
            transform: rotateY(144deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(6) {
            transform: rotateY(180deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(7) {
            transform: rotateY(216deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(8) {
            transform: rotateY(252deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(9) {
            transform: rotateY(288deg) translateZ(308px);
        }
       
        .stage ul li:nth-of-type(10) {
            transform: rotateY(324deg) translateZ(308px);
        }
       
        h2 {
            position: absolute;
            z-index: 10;
            opacity: 0.8;
            color: hotpink;
        }
window.onload = function() {
            var ring = document.getElementById('ring');
            var lis = ring.getElementsByTagName('li');
            for (var i = 0; i < lis.length; i++) {
                lis[i].idx = i;
                lis[i].onclick = function() {
                    ring.style.transform = 'rotateY(-' + (this.idx * 36) + 'deg)';
                }
            }
        }
 <div>
        <h2>点我我到最前面</h2>
        <ul id="ring">
            <li><img src="images/88/1.jpg" alt=""></li>
            <li><img src="images/88/2.jpg" alt=""></li>
            <li><img src="images/88/3.jpg" alt=""></li>
            <li><img src="images/88/4.jpg" alt=""></li>
            <li><img src="images/88/5.jpg" alt=""></li>
            <li><img src="images/88/10.jpg" alt=""></li>
            <li><img src="images/88/6.jpg" alt=""></li>
            <li><img src="images/88/7.jpg" alt=""></li>
            <li><img src="images/88/8.jpg" alt=""></li>
            <li><img src="images/88/9.jpg" alt=""></li>
        </ul>
    </div>
图片的选择需要选择400*400的图片    

      本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！