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

随机推荐

Roman and Browser-罗曼的浏览器 CodeForce1100A 暴力
题目链接:Roman and Browser 题目原文 This morning, Roman woke up and opened the browser with
Xshell无法连接Linux虚拟机问题
遇到的情况是,在虚拟机下安装了Linux后,xshell无法连接远程的虚拟机. 我遇到的情况是虚拟机可以ping 主机,主机确ping不了虚拟机. 使用的VM设置了两个网卡,一个nat 一个host ...
Maven 梳理-手动创建Maven项目（非web），使用Maven编译、测试、打包、安装、引用
创建空目录 F:\jtDevelop\maventest\myapp 创建pom.xml文件 <project xmlns="http://maven.apache.org/POM/4 ...
RocketMQ学习 -> NameServer路由中心
RocketMQ项目代码核心目录说明 broker:broker启动进程 client:消息客户端,包含消息生产者,消息消费者相关类 common:公共包 dev:开发者信息(非源代码) distri ...
C#2匿名方法中的捕获变量
乍一接触"匿名方法中的捕获变量"这一术语可能会优点蒙,那什么是"匿名方法中的捕获变量"呢?在章节未开始之前,我们先定义一个委托:public delegate ...
httpd2.2
httpd -t:检查httpd配置文件/etc/httpd/conf/httpd.conf的语法错误请求报文语法 <method> <request-URL> <ve ...
win10下使用Linux命令
下载Cygwin安装包官网下载地址:https://cygwin.com/install.html 执行下载好的安装程序选择默认安装路径C:\cygwin64即可,可在C:\cygwin64\bi ...
版本控制之Git小结
一.版本控制 1.1 什么是版本控制版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版本修订情况的系统.可以对任何类型的文件进行版本控制. 1.2 为什么需要版本控制有了版本控制就可以 ...
python编程基础之二十七
列表生成式:[exp for iter_var in iterable] 同样也会有字典生成式,集合生成式,没有元组生成式,元组生成式的语法被占用了字典生成式,集合生成式,就是外面那个括号换成{} ...
BZOJ 2535: [Noi2010]Plane 航空管制2
Description 世博期间,上海的航空客运量大大超过了平时,随之而来的航空管制也频频发生.最近,小X就因为航空管制,连续两次在机场被延误超过了两小时.对此,小X表示很不满意. 在这次来烟台的路上 ...

3D切割轮播图

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

随机推荐

热门专题