<!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. PHP整理--MySQL--DOS命令操作数据库

    一.MySQL:关系型数据库,存在表的概念. MySQL的结构:数据库可以存放很多表,每张表可以存放多个字段,每个字段可以存放多个记录. 二.Dos操作数据库 用PHPStudy终端➡其他选项菜单➡M ...

  2. windows server 2012 FTP连接报530 User 用户名 cannot log in home directory inaccessible的解决方法

    我最近在创建个人网站,经过了万网购买域名注册(www.lingcup.xyz ,www.lingcup.com),在主机屋购买免费云服务器(ip是49.4.142.41),域名别名解析(cname)到 ...

  3. github分支规范

    转自:https://www.cnblogs.com/xuld 一.目的 我们制定分支规范,意在实现以下目标: 减少沟通成本:开发者可以很清晰地知道需要修改的代码位于哪个分支. 减少 bug 隐患:避 ...

  4. weblogic中配置数据源

    Weblogic数据源配置 一.配置数据源 1.点击数据源,进入数据源配置页面,点击新建后选择一般数据源 2.输入名称和jndi名称(两个输入一样即可)后点击下一步 3.选择驱动后点击下一步 4.输入 ...

  5. 从mysql主从复制到微信开源的phxsql

    严格的来说,微信开源的phxsql不是数据库,而是一个数据库的插件: 传统的互联网数据库结构一般是这样的: 服务访问数据库是通过分片来的: 除了这种基于hash的分片,还有一种基于range的分片方式 ...

  6. faster-rcnn 笔记

    2019-02-18,15点00 ''' 下面是别人写的原始的笔记,我在上面自己补充了一些. ''' #https://www.cnblogs.com/the-home-of-123/p/974796 ...

  7. Cookie随笔

    解决了服务器不能识别不同浏览器的问题,相当于给每个浏览器加了个“身份证”. Cookie首先由服务器创建发给浏览器,随后浏览器每次访问服务器时都带上这个Cookie. Cookie缺点: ·Cooki ...

  8. jQuery实现简单的五星好评

    最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...

  9. C++矩阵加速经典题目：Warcraft III 守望者的烦恼 [vijos 1067]

    Warcraft III 守望者的烦恼 背景 守望者-warden,长期在暗夜精灵的的首都艾萨琳内担任视察监狱的任务,监狱是成长条行的,守望者warden拥有一个技能名叫"闪烁", ...

  10. mktime 夏令时

    我们的最终目的是把字符串格式的时间转换为内部使用的“日历时间”,即到UTC 1970年1月1日零时的秒数.这里就存在夏令时的问题.比如俄罗斯时间2008年10月26日2:30由于夏令时的跳变会经过两次 ...