原生js实现图片三维切片翻转过渡幻灯片效果代码-html代码-BFW代码库

原生js实现图片三维切片翻转过渡幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：原生js实现图片三维切片翻转过渡幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style type="text/css" id="css">
        body {
            background: black;
     
        }
        #List {
                  
            width: 800px;
            height: 360px;
            box-shadow: 0 0 10px white;
            margin: 20px auto 0;
            perspective: 1500px;
            /* 站 在1000px之处看li	 */
        }
        #List li {
            width: 40px;
            height: 360px;
            float: left;
            position: relative;
            opacity: 1;
            transform-style: preserve-3D;
            /* 	3D空间 */
            transform-origin: center center -180px;
        }
        #List li a,#List li span {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #List li span {
            width: 360px;
            position: absolute;
            height: 100%;
        }
        #List li a:nth-child(1) {
            left: 0;
            top: 0;
            background: url("//repo.bfw.wiki/bfwrepo/image/5d65eaff5a217.png");
        }
        #List li a:nth-child(2) {
            left: 0;
            top: -100%;
            background: url("//repo.bfw.wiki/bfwrepo/image/600d657ecf5ce.png");
            transform-origin: bottom;
            transform: rotateX(90deg);
        }
        #List li a:nth-child(3) {
            left: 0;
            top: 0;
            background: url("//repo.bfw.wiki/bfwrepo/image/5ffa44b01145d.png");
            transform: translateZ(-360px) rotateX(180deg);
        }
        #List li a:nth-child(4) {
            left: 0;
            top: 100%;
            background: url("//repo.bfw.wiki/bfwrepo/image/60987bfc5afa0.png");
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        #List:hover li {
            transform: rotateX(360deg);
        }
        #btns {
            width: 200px;
            margin: 80px auto;
        }
        #btns li {
            width: 40px;
            height: 40px;
            background: red;
            color: white;
            float: left;
            text-align: center;
            line-height: 40px;
            font-style: italic;
            .........完整代码请登录后点击上方下载按钮下载查看