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) translateY(-250px) translateZ(250px);
          -moz-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
          -o-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
          -ms-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
        }
        .slider-outer .slider-inner.rotate.four {
          -webkit-transform: rotateX(-270deg) translateY(-250px);
          -moz-transform: rotateX(-270deg) translateY(-250px);
          -o-transform: rotateX(-270deg) translateY(-250px);
          -ms-transform: rotateX(-270deg) translateY(-250px);
        }
        .slider-outer .slide {
          display: block;
          width: 100%;
          height: 250px;
          position: absolute;
          background: white;
          background-color: #ededed;
          background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#ededed));
          background-image: -webkit-linear-gradient(top, white, #ededed);
          background-image: -moz-linear-gradient(top, white, #ededed);
          background-image: -o-linear-gradient(top, white, #ededed);
          background-image: linear-gradient(to bottom, white, #ededed);
          padding: 27px;
          color: #4ECDC4;
          overflow: hidden;
          -webkit-transform-origin: 0% 0%;
          -moz-transform-origin: 0% 0%;
          -o-transform-origin: 0% 0%;
          -ms-transform-origin: 0% 0%;
        }
        .slider-outer .slide .slide-title {
          display: block;
          position: relative;
          font-size: 70px;
          font-weight: 100;
          z-index: 12;
        }
        .slider-outer .slide i {
          display: block;
          position: absolute;
          top: 10px;
          right: -10px;
          font-size: 300px;
          color: #C7F464;
          z-index: 11;
          text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
        }
        .slider-outer .slide.top {
          background: #556270;
          background-color: #46505c;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#556270), to(#46505c));
          background-image: -webkit-linear-gradient(top, #556270, #46505c);
          background-image: -moz-linear-gradient(top, #556270, #46505c);
          background-image: -o-linear-gradient(t.........完整代码请登录后点击上方下载按钮下载查看