<!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. Day3 -4.9！受到毕设的突然袭击，一脸蒙蔽，学习暂时停止，明晚继续

    PS:啊啊啊啊,慌张的不行,不详的预感终于爆发了,第二次毕设评图好突然,没办法了,竹径和学习突然搁置,明晚健身/建模/补更Day3,感到崩溃 ————————————————————————————— ...

  2. Zookeeper使用--命令行

    一.前言 在学习了Zookeeper相关的理论知识后,下面接着学习对Zookeeper的相关操作. 二.Zookeeper部署 Zookeeper的部署相对来说还是比较简单. Zookeeper有三种 ...

  3. Jenkins+Gradle+Sonar进行Java项目代码分析

    Jenkins+Maven+Sonar与Jenkins+Gradle+Sonar配置方法很相似,区别就是Java项目所用的编译工具不同,一个是maven,一个是gradle 使用maven编译工具的可 ...

  4. VirtualBox CentOS7 Mini 安装增强工具

    安装相关依赖 # yum install vim gcc kernel kernel-devel bzip2 -y # reboot 点击虚拟机菜单栏 => 设备 => 安装增强功能 # ...

  5. centos 下安装java

    yum安装; 查看yum库中的java安装包 :yum -y list java* 安装需要的jdk版本的所有java程序:yum -y install java-1.8.0-openjdk* 查看j ...

  6. OO课程第三次总结QWQ

    调研,然后总结介绍规格化设计的大致发展历史和为什么得到了人们的重视 emmm为这个问题翻遍百度谷歌知乎也没有得到答案,那我就把自己认为最重要的两点简要说明一下吧,欢迎大家补充~ 1.便于完成代码的重用 ...

  7. java学习（五）

    学号 20189214 <Java程序设计>第五周学习总结 教材学习内容总结 输入输出 文件系统可以包含3种类型的对象:文件.目录和符号链接. 一个文件或路径是一个java.io.File ...

  8. OO第一单元单元总结

    总述 三周的时间一晃而过,也到了和表达式说再见的时候了.想起来,现在已经能够优雅地在互测“攻击”别人,然后笑对被别人“攻击”,就觉得OO这三周还是很有意义,也多多少少改变了我.周六已经快习惯早上背着包 ...

  9. Ubuntu 下的QQ WECHAT FOXMAIL解决方案

    原文链接: https://www.lulinux.com/archives/1319 真心很强大. Ubuntu系发行版*安装deepin wine QQ的步骤 1,安装deepin-wine环境: ...

  10. APP动态加载轮播图片

    如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...