<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    * {

      padding: 0;

      margin: 0;

      list-style: none;

    }

    .view {

      width: 560px;

      height: 300px;

      margin: 100px auto;

      position: relative;

    }

    ul {

      width: 100%;

      height: 100%;

      transform-style: preserve-3d;

      transform: rotate3d(1, 1, 0, 0deg);

    }

    ul>li {

      width: 20%;

      height: 100%;

      float: left;

      transform-style: preserve-3d;

      position: relative;

      /* 过度效果 */

      transition: transform 0.6s;

    }

    ul>li>span {

      width: 100%;

      height: 100%;

      position: absolute;

      left: 0;

      top: 0;

    }

    ul>li>span:nth-of-type(1) {

      background: url("./images/q1.jpg");

      /* 往z轴正方向偏移 */

      transform: translateZ(150px);

    }

    ul>li>span:nth-of-type(2) {

      background: url("./images/q2.jpg");

      transform: translateY(-150px) rotateX(90deg);

    }

    ul>li>span:nth-of-type(3) {

      background: url("./images/q3.jpg");

      transform: translateZ(-150px) rotateX(-180deg);

    }

    ul>li>span:nth-of-type(4) {

      background: url("./images/q4.jpg");

      transform: translateY(150px) rotateX(-90deg);

    }

    ul>li:nth-of-type(2)>span {

      background-position-x: -100%;

    }

    ul>li:nth-of-type(3)>span {

      background-position-x: -200%;

    }

    ul>li:nth-of-type(4)>span {

      background-position-x: -300%;

    }

    ul>li:nth-of-type(5)>span {

      background-position-x: -400%;

    }

    .pre,

    .next {

      width: 40px;

      height: 60px;

      font-size: 40px;

      position: absolute;

      top: 50%;

      text-decoration: none;

      text-align: center;

      line-height: 60px;

      color: #ccc;

      background-color: rgba(0, 0, 0, 0.4);

      transform: translate(0, -50%);

    }

    .pre {

      left: 0;

    }

    .next {

      right: 0;

    }

  </style>

</head>

<body>

  <div class="view">

    <ul>

      <li>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

      </li>

      <li>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

      </li>

      <li>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

      </li>

      <li>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

      </li>

      <li>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

      </li>

    </ul>

    <a href="javascript:;" class="pre" id="pre">&lt;</a>

    <a href="javascript:;" class="next" id="next">&gt;</a>

  </div>

  <script src="./js/jquery-3.1.0.js"></script>

  <script>

    $(function () {

      var index = 0

      var flag = true;

      //右箭头

      $("#next").on("click", function () {

        if (flag == true) {

          flag = false;

          index--;

          $("li").each(function (key, value) {

            $(this).css({

              "transform": "rotateX(" + (index * 90) + "deg)",

              "transition-delay": (key * 0.2) + "s"

            });

          });

          setTimeout(function () {

            flag = true;

          }, 1000);

        }

      });

      //左箭头

      $("#pre").on("click", function () {

        if (flag == true) {

          flag = false;

          index++;

          $("li").each(function (key, value) {

            $(this).css({

              "transform": "rotateX(" + (index * 90) + "deg)",

              "transition-delay": (key * 0.2) + "s"

            });

          });

          setTimeout(function () {

            flag = true;

          }, 1000)

        }

      })

    })

  </script>

</body>

</html>

3D轮播图的更多相关文章

  1. CSS3之3D轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）

    前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

  3. 3d轮播图——类似酷狗的轮播

    说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...

  4. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  5. 微信小程序 - 3d轮播图组件(基础)

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  6. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

  7. 插件-3D轮播图

    先上效果图 查看实例点击 这里  这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...

  8. featureCarousel.js 3d轮播图插件

    jQuery Feature Carousel 插件是国外的一比较优秀的旋转木马图片插件. 点击这里进入原文. 插件特点: 1.处理div的3d旋转木马效果. 2.支持一个中心,2个侧面的功能 3.中 ...

  9. 利用css3实现3D轮播图

    动画实现主要利用了z-index将层级关系改变,从而实现了焦点图的效果:css3属性 transform rotate 来实现图片的动画效果 .transition实现过度动画! * { margin ...

随机推荐

  1. Vue仿string.format

    Vue.prototype.$stringFormat = function stringFormat (formatted, args) { for (let i = 0; i < args. ...

  2. Git实际操作

    1.基本操作 git init 初始化仓库 git status 查看仓库状态 git add XXX.XX 向暂存区中添加文件XXX.XX git commit 保存仓库的历史记录 git log ...

  3. 找不到org.restlet.ext.jackson 解决办法

    检出 转成maven工程 ,不过最后发现有两个包maven没有找到: <dependency> <groupId>org.restlet.jse</groupId> ...

  4. apache-tomcat 部分中文.html .jsp 连接 404问题

    修改文件到 自己的安装目录:\apache-tomcat-7.0.79\conf 添加   Connector URIEncoding="utf-8" <Connector ...

  5. testXSS <img src="aa" onerror="javascript:alert('XSS');"/>

    adsa  </p><img src="aa" onerror="javascript:alert('XSS');"/><p> ...

  6. 2019-1-24 Spark 学习 --总体架构

    2019-1-24 Spark 学习 --总体架构 新建 模板 小书匠 1548339392539.jpg 1548339357270.jpg 1548339372461.jpg 1548339345 ...

  7. LCD调试

    (1) 液晶显示模式 并行:MCU接口.RGB接口.Vysnc接口 串行:SPI接口.MDDI接口 (2) 屏幕颜色 实质上即为色阶的概念.色阶是表示手机液晶显示屏亮度强弱的指数标准,也就是通常所说的 ...

  8. Codeforces Codeforces Round #484 (Div. 2) E. Billiard

    Codeforces Codeforces Round #484 (Div. 2) E. Billiard 题目连接: http://codeforces.com/contest/982/proble ...

  9. 20155205 郝博雅 Exp6 信息搜集与漏洞扫描

    20155205 郝博雅 Exp6 信息搜集与漏洞扫描 一.实践内容 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务 ...

  10. Apache Tomcat Eclipse Integration

    An Illustrated Quick Start Guide Apache Tomcat makes hosting your applications easy. The Eclipse IDE ...