实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html lang="zh">
    <head><meta charset='UTF-8'>
        <title>html5+css3制造3D电影海报旋转轮播展示</title>
        <script src='/api/jq/5733e32a6fd17/js/prefixfree.min.js'></script>
        <style class="cp-pen-styles">
            body{width: 100%;height: 100%;background: #100000;font-family: '微软雅黑';}
            p{color: #fff;}
            .center{text-align: center;}
            p a{color: #fff;}
            div#carousel { 
                perspective: 1200px; 
                background: #100000; 
                padding-top: 10%; 
                font-size:0; 
                margin-bottom: 3rem; 
                overflow: hidden; 
            }
            figure#spinner { 
                transform-style: preserve-3d; 
                height: 300px; 
                transform-origin: 50% 50% -500px; 
                transition: 1s; 
            } 
            figure#spinner img { 
                width: 40%; max-width: 425px; 
                position: absolute; left: 30%;
                transform-origin: 50% 50% -500px;
                outline:1px solid transparent; 
            }
            figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
            }
            figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
            figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
            figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
            figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
            figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
            figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
            figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
            div#carousel ~ span { 
                color: #fff; 
                margin: 5%; 
                display: inline-block; 
                text-decoration: none; 
                font-size: 2rem; 
                transition: 0.6s color; 
                position: relative; 
                margin-top: -6rem; 
                border-bottom: none; 
                line-height: 0; }
            div#carousel ~ span:hover { color: #888; cursor: pointer; }
            a{color: #6c4176;text-decoration: none;}
            .sucaihuo-demo{width: 100%;}
            .sucaihuo-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #6c4176;font-weight: 700;}
            .sucaihuo-demo a:hover{opacity: 0.6;}
            .sucaihuo-demo a.current{background:#6c4176;color: #fff; }
        </style>
    </head>
    <body>
        <div id="carousel">
            <figure id="spinner">
                <img src="/api/jq/5733e32a6fd17/img/8.jpg" alt="">
                <img src="/api/jq/5733e32a6fd17/img/9.jpg" alt="">
                <img src="/api/jq/5733e32a6fd17/img/10.jpg" alt="">
                <img src="/api/jq/5733e32a6fd17/img/11.jpg" alt="">
                <img src="/api/jq/5733e32a6fd17/img/12.jpg" alt="">
                <img src="/api/jq/5733e32a6fd17/img/13.jpg" alt="">
                <img src="/api/jq/5733e32a6fd17/img/14.jpg" alt="">
                <img src="/api/jq/5733e32a6fd17/img/15.jpg" alt="">
            </figure>
        </div>
        <span style=float:left class=ss-icon onclick="galleryspin('-')">&lt;</span>
        <span style=float:right class=ss-icon onclick="galleryspin('')">&gt;</span>
        <div class="sucaihuo-demo center">
            <a href="/api/jq/5733e32a6fd17/index.html" class="current">simple</a>
            <a href="/api/jq/5733e32a6fd17/index2.html">Advance</a>
        </div>
        <script>
            var angle = 0;
            function galleryspin(sign) {
                spinner = document.querySelector('#spinner');
                if (!sign) {
                    angle = angle + 45;
                } else {
                    angle = angle - 45;
                }
                spinner.setAttribute('style', '-webkit-transform: rotateY(' + angle + 'deg); -moz-transform: rotateY(' + angle + 'deg); transform: rotateY(' + angle + 'deg);');
            }
        </script>
    </body>
</html>

AخA
 
<!DOCTYPE html>
<html lang="zh">
    <head><meta charset='UTF-8'>
        <title>html5+css3制造3D电影海报旋转轮播展示</title>
        <script src='/api/jq/5733e32a6fd17/js/prefixfree.min.js'></script>
        <style class="cp-pen-styles">
            body{width: 100%;height: 100%;background: #100000;font-family: '微软雅黑';}
            p{color: #fff;}
            .center{text-align: center;}
            p a{color: #fff;}
            div#carousel { 
                perspective: 1200px; 
                background: #100000; 
                padding-top: 10%; 
                font-size:0; 
                margin-bottom: 3rem; 
                overflow: hidden; 
            }
            figure#spinner { 
                transform-style: preserve-3d; 
                height: 300px; 
                transform-origin: 50% 50% -500px; 