<!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. dotnet run 提示System.Net.Sockets.SocketException (10049): 在其上下文中，该请求的地址无效。

    更换端口号试一下. 查看官方文档 PS: 使用帮助命令 -h,可以指定启动配置文件: dotnet run --launch-profile  xxx 例如下面的配置文件,假如我们要使用codes-t ...

  2. scrapy 爬取斗罗大陆漫画

    # -*- coding: utf-8 -*- import scrapy import json import os import urllib import time from scrapy.ht ...

  3. 直接插入排序（js版）

    直接插入排序(从小到大) 基本思想:将一个记录插入到已经排好序的有序表中,得到一个新的,记录数加1的有序表. function insertSort(arr){ var i,j,temp=0; for ...

  4. 在linux上添加硬盘

    首先呢我们需要添加一个硬盘,如下所示: 接着我们需要新建一个硬盘 代码如下: mkdir /bak fdisk -l 接着我们继续第二步,分区 代码如下: fdisk /dev/sdb n   add ...

  5. SSL及使用openssl实现CA

    TLS如何实现各种功能?数据如何加密在网络上传输? 网景(Netscape)公司在应用层和传输层加入了半层,把这个半层称之为SSL,SSL不是软件,可以理解是一个库,当http交给tcp层之前先通过s ...

  6. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  7. 安卓学习第一节--环境搭建及Android Studio 安装

    1.安装JDK 2.安装AS 安装参考网址 https://www.cnblogs.com/xiadewang/p/7820377.html 下载网址: http://www.android-stud ...

  8. P2146 [NOI2015]软件包管理器

    题目链接:https://www.luogu.org/problemnew/show/P2146 题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安 ...

  9. MybatisMapper 动态映射（增删改查）

    //接口内容以及注意事项 package cn.jy.mybatis.mapper; import java.util.List; import cn.jy.mybatis.pojo.User; pu ...

  10. iOS12 XCode10更新

    原因:libc++.tbd库取代了libstdc++.6.0.9.tbd库 解决方法:我在项目里去掉了libstdc++.6.0.9.tbd库 这个时候去编译还是会报错, 解决方法:Xcode-fil ...