预览图：

实现原理：将图片切割构建一个和ul（电脑屏幕）同一个轴的立方体，利用延时旋转实现切割效果

知识点：transform-style属性（必须搭配transform属性使用）

值 描述
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。

节流阀，transitionend

空间布局：

将一张图片分成五份li，每份li放4个span折叠成正方体

轴：轴是整个立方体左右面中心的连线

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .box {

             width: 560px;

             height: 300px;

             margin: 100px auto 0;

             border: 1px solid #ccc;

             position: relative;

         }

         .box .imageBox {

             list-style: none;

             width: 100%;

             height: 100%;

             /*overflow: hidden;*/

             /*视距：呈现近大远小效果 */

             /*perspective: 500px;*/

             /*3d呈现*/

             transform-style: preserve-3d;

         }

         .box .imageBox li {

            /* width: 100%;

             height: 100%;

             float: left;*/

             width: 112px;

             height: 100%;

             float: left;

             position: relative;

             /*视距：呈现近大远小效果 */

             /*perspective: 500px;*/

             /*3d呈现*/

             transform-style: preserve-3d;

             /*加过渡*/

             transition:all 1s;

         }

         .box .imageBox li span{

             position: absolute;

             left: 0;

             top: 0;

             width: 100%;

             height: 100%;

             background: url("images/1.jpg") no-repeat;

         }

         /*拼接立体容器*/

         /*1.立体容器旋转中心要在电脑平面上*/

         /*2.立体容器每一个面的图片正面朝外*/

         .box .imageBox li span:nth-child(1){

             background-image: url("images/1.jpg");

             transform: translateZ(150px);

         }

         .box .imageBox li span:nth-child(2){

             background-image: url("images/2.jpg");

             /*旋转过后轴也会旋转：：：：：：*/

             transform: rotateX(90deg) translateZ(150px);

         }

         .box .imageBox li span:nth-child(3){

             background-image: url("images/3.jpg");

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

         }

         .box .imageBox li span:nth-child(4){

             background-image: url("images/4.jpg");

             transform: rotateX(270deg) translateZ(150px);

         }

         /*拼接背景*/

         .box .imageBox li:nth-child(1) span{

             background-position: 0 0;

         }

         .box .imageBox li:nth-child(2) span{

             background-position: -112px 0;

         }

         .box .imageBox li:nth-child(3) span{

             background-position: -224px 0;

         }

         .box .imageBox li:nth-child(4) span{

             background-position: -336px 0;

         }

         .box .imageBox li:nth-child(5) span{

             background-position: -448px 0;

         }

         /*.box .imageBox li img{

             display: block;

             width: 100%;

             height: 100%;

         }*/

         .box .left,

         .box .right{

             position: absolute;

             width: 50px;

             height: 70px;

             background: rgba(0,0,0,.2);

             top:115px;

             text-align: center;

             line-height: 70px;

             font-size: 20px;

             color: #fff;

             text-decoration: none;

             font-weight: bold;

         }

         .box .right{

             right: 0;

         }

     </style>

 </head>

 <body>

 <!--1.完成这个例子要用到什么知识-->

 <!--2.回顾一下3d转换-->

 <!--3.轴的正方向，translate rotate 3d转换属性-->

 <!--4.rotateX rotateY rotateZ 旋转方向  方法方式套路-->

 <!--4.1 顺着轴的正方向看  顺时针旋转是负角度  逆时针旋转是正角度-->

 <!--5.过渡完成动画-->

 <!--6.通过jquery辅助操作-->

 <div class="box">

     <ul class="imageBox">

         <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>

     <!-- 转义符 \  实体 &lt; -->

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

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

 </div>

 <script src="jquery.min.js"></script>

 <script>

     $(function () {

         /*1.点击切换图片*/

         /*定义一个索引*/

         /*看第2张图 -90deg  看第4张图 90deg */

         var index = 0;

         /*开关*/

         var flag = true;

         /*2.点击左边的按钮 上一张*/

         $('.left').on('click',function () {

             if(!flag) return false;

             flag = false;

             index --;

             console.log(index);

             var angle = - index * 90;

             $('li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {

                 /*设置不同的延时*/

                 $(this).css('transition-delay',i*0.25+'s');

             });

         });

         /*3.点击右边的按钮 下一张*/

         $('.right').on('click',function () {

             if(!flag) return false;

             flag = false;

             index ++;

             console.log(index);

             var angle = - index * 90;

             $('li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {

                 /*设置不同的延时*/

                 $(this).css('transition-delay',i*0.25+'s');

             });

         });

         /*4.优化 重复点击的时候动画会层叠的执行  节流阀 */

         $('li:last').on('transitionend',function () {

             /*最后一部分张图片旋转完毕*/

             flag = true;

         });

     });

 </script>

 </body>

 </html>

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

  1. 带锁的3D切割轮播图

    3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...

  2. css3实现3D切割轮播图案例

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

  3. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  4. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  5. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. CSS3,3D效果轮播图

    ---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...

  7. transform—切割轮播图

    效果演示: 1.结构分析 第一步:在一个div里面有显示图片的ul标签(1个)和左右切换的a标签(2个): 第二步:ul标签中有5个li标签,li标签浮动,每个li标签的宽度占ul宽度的五分之一,高度 ...

  8. 78.3D立体轮播图（完整兼容手机端和pc端）

    效果呈现来源于http://www.jq22.com/demo/jR3DCarousel-master20160315/ 在此基础上改成需要的3个分类的3D图 由于原有的不支持粘贴复制显示3个分类 我 ...

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

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

随机推荐

  1. Windows认证 | Windows本地认证

    Windows的登陆密码是储存在系统本地的SAM文件中的,在登陆Windows的时候,系统会将用户输入的密码与SAM文件中的密码进行对比,如果相同,则认证成功. SAM文件是位于%SystemRoot ...

  2. Spotlight性能监控工具的配置及使用

    这是我离线整理资料里的内容,大概是2012年时候开始使用此性能监控工具的,直到至今,接触到几个性能监控工具里,还是美国quest公司生产的Spotlight此产品相对比较牛! 我也不知道现在发展到能支 ...

  3. 《图解HTTP》读后记

    看了一遍又一遍…………不如记一下 用做笔记的方式来看,发现了好多之前没发现的知识点.....感觉前几次看了跟没看一样... 1.1HTTP通常被译为超文本传输协议,但这种译法并不严谨.严谨的译名应该为 ...

  4. 基于SpringBoot + Mybatis实现 MVC 项目

    1.预览: (1)完整项目结构 (2) 创建数据库.数据表: [user.sql] SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- ...

  5. 【ADO.NET基础】后台获取前台控件

    C# 后台获取前台 input 文本框值.string aa=Request.Form[headself]; 那么要是后台给前台input文本框赋值呢? 后台 public string Headse ...

  6. Flume 学习笔记之 Flume NG+Kafka整合

    Flume NG集群+Kafka集群整合: 修改Flume配置文件(flume-kafka-server.conf),让Sink连上Kafka hadoop1: #set Agent name a1. ...

  7. Android Studio 优秀插件：GsonFormat

    作为一个Android程序猿,当你看到后台给你的json数据格式时: { "id":123, "url": "http://img.donever.c ...

  8. Nginx常用命令，解决你日常运维的烦恼

    前面,跟大家简单地介绍了负载均衡和Nginx的一些基础配置(Nginx负载均衡配置实例),接下来,跟大家介绍一下Nginx的常用命令,便于日常的运维. 查看原文 停止Nginx的方法 通过之前的学习, ...

  9. python 安装pyqt

    ---恢复内容开始--- 一.安装 1.官网:www.riverbankcomputing.com 2.使用命令安装,可以自动去官网查找与Python版本号相同的程序进行下载,比较方便,如果不是这样也 ...

  10. java并发基础及原理

    java并发基础知识导图   一 java线程用法 1.1 线程使用方式 1.1.1 继承Thread类 继承Thread类的方式,无返回值,且由于java不支持多继承,继承Thread类后,无法再继 ...