jquery实现立体翻转幻灯片轮换效果代码-html代码-BFW代码库

jquery实现立体翻转幻灯片轮换效果代码

代码语言：html

所属分类：幻灯片

代码描述：jquery实现立体翻转幻灯片轮换效果代码

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

<html>

<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
        .clearfix {
          zoom: 1;
        }
        .clearfix:before, .clearfix:after {
          content: "";
          display: table;
        }
        .clearfix:after {
          clear: both;
        }
        
        * {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        body {
          background: #1d1d1f;
          font-family: "lato", helvetica, arial, sans-serif;
          color: white;
        }
        
        #wrapper {
          display: block;
          width: 90%;
          margin: 50px auto;
        }
        
        .slider-outer {
          display: block;
          width: 100%;
          height: 250px;
          position: relative;
          -webkit-perspective: 1600px;
          -moz-perspective: 1600px;
          -o-perspective: 1600px;
          -ms-perspective: 1600px;
        }
        .slider-outer .slider-inner {
          display: block;
          width: 100%;
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          -o-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
          -webkit-transition: all 0.3s linear;
          -moz-transition: all 0.3s linear;
          -o-transition: all 0.3s linear;
          -ms-transition: all 0.3s linear;
          -webkit-transform-origin: 50% 100%;
          -moz-transform-origin: 50% 100%;
          -o-transform-origin: 50% 100%;
          -ms-transform-origin: 50% 100%;
        }
        .slider-outer .slider-inner.rotate.two {
          -webkit-transform: rotateX(-90deg) translateZ(250px);
          -moz-transform: rotateX(-90deg) translateZ(250px);
          -o-transform: rotateX(-90deg) translateZ(250px);
          -ms-transform: rotateX(-90deg) translateZ(250px);
        }
        .slider-outer .slider-inner.rotate.three {
          -webkit-transform: rotateX(-180deg) trans.........完整代码请登录后点击上方下载按钮下载查看