3D切割轮播图

预览图：

实现原理：将图片切割构建一个和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切割轮播图的更多相关文章

带锁的3D切割轮播图
3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...
css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度二.代码 <!DOCTYPE html> <html lang="en"&g ...
CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
transform—切割轮播图
效果演示: 1.结构分析第一步:在一个div里面有显示图片的ul标签(1个)和左右切换的a标签(2个): 第二步:ul标签中有5个li标签,li标签浮动,每个li标签的宽度占ul宽度的五分之一,高度 ...
78.3D立体轮播图（完整兼容手机端和pc端）
效果呈现来源于http://www.jq22.com/demo/jR3DCarousel-master20160315/ 在此基础上改成需要的3个分类的3D图由于原有的不支持粘贴复制显示3个分类我 ...
3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

随机推荐

JsonConfig的jsonConfig.setExcludes的用法
1.问题描述在项目中经常会有两个类存在一对多或者多对一的关联关系,这样在查询多的一方时,会深入查询关联的一方,而我们可能并不需要去深入查询那些数据,此时使用JsonConfig的jsonConfig ...
js校验对象是否全部为空
function judgeIsNotBlank(obj) { var bool = true; var arr = Object.keys(obj); ; for(var key in obj){ ...
.Net Core 商城微服务项目系列（八）：购物车
最近加班有点多,一周五天,四天加班到11点+,心很累.原因是我当前在的这个组比较特殊,相当于业务的架构组,要为其它的开发组提供服务和监控.所以最近更新的也少,不过这个元旦三天假应该会更新三篇. 这篇是 ...
Docker系列（四）：容器之间的网络通信
首先我们需要知道:两个容器要能通信,必须要有属于同一个网络的网卡. 先来看下正常情况下我们的容器默认是否是能通信的,这里运行两个测试容器: docker run -it --name=bbox1 bu ...
Dockerfile 构建镜像
一.使用dockerfile构建镜像基本结构: a.设置基础镜像当前镜像继承于的基础镜像 FROM centos:latest b.设置维护者信息没有固定格式 c.设置需要添加到容器中的文件 ...
【SQL】sql统计不同类别的不同状态的数目
例子:某主机下有5149个设备,设备分不同类别,设备运行会有不同状态(1-正常.2-告警.3-故障.0-离线) sql: SELECT t.DEVICE_TYPE_NAME,SUM(CASE t.DE ...
spring boot通过Spring Data Redis集成redis
在spring boot中,默认集成的redis是Spring Data Redis,Spring Data Redis针对redis提供了非常方便的操作模版RedisTemplate idea中新建 ...
ubuntu14.04 安装tensorflow始末
基于ubuntu14.04 干净的系统一步步遇到的坑记录下来: 怀着平静学习的心情,问题总的能解决的! 1. 首先看了下当前python版本 python --version Python 2.7.6 ...
了解ajax基本爬取方式
'''爬去豆瓣电影数据了解ajax的基本爬去方式 ''' from urllib import requestimport jsonimport ssl url = "https://mov ...
『嗨威说』算法设计与分析 - PTA 数字三角形 / 最大子段和 / 编辑距离问题（第三章上机实践报告）
本文索引目录: 一.PTA实验报告题1 : 数字三角形 1.1 实践题目 1.2 问题描述 1.3 算法描述 1.4 算法时间及空间复杂度分析二.PTA实验报告题2 : 最大子段和 2.1 实践题目 ...

3D切割轮播图

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

随机推荐

热门专题