<!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. mongodb的配置文件详解()

    官方地址  https://docs.mongodb.com/manual/reference/configuration-options/#configuration-file 以下页面描述了Mon ...

  2. JavaScript Json(转)

    JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 终于,在2002年的一天,道格拉斯·克罗克福特(Douglas Crockford)同学为了拯救深陷水深火 ...

  3. .net数据库实现Excel的导入与导出

    .net数据库实现Excel的导入与导出 参考路径:https://www.cnblogs.com/splendidme/archive/2012/01/05/2313314.html 1.defau ...

  4. npm安装cnpm、vue、react

    安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org 安装vuecnpm install --global vue- ...

  5. SAS 选取部分观测

    SAS  对部分观测得处理 在建立新数据集时,有以下两种方式可以从已经存在的数据集中选取观测到新数据集中. ·通过删除不满足条件的观测来保留想要的观测. ·仅接受满足条件的观测. 条件可以由IF语句. ...

  6. HTML表单标签

    <form>标签 1.在HTML中,<form></form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容.每个表单元素开 ...

  7. apt-get update 出现错误“ AppStream cache update completed, but some metadata was ignored due to errors. ”

    只需要 执行 sudo rm /var/lib/dpkg/lock;     之后再次执行:sudo apt-get update

  8. java.lang.RuntimeException: Invalid action class configuration that references an unknown class name

    ---恢复内容开始--- 转自 : https://www.cnblogs.com/javawebsoa/archive/2013/05/25/3098190.html java.lang.Runti ...

  9. python_flask 基础巩固 (URL传输传递方式)

    URL传输传递@app.route('/'):@app.route('/list/')@app.route('/list/<int:id>/')@app.route('/list/< ...

  10. data science学习笔记1

    Mutiple Plots on One Graph plt.plot(x, norm.pdf(x)) plt.plot(x, norm.pdf(x, 1.0, 0.2)) #1.0 = mean, ...