一、3d转换

3D旋转套路：顺着轴的正方向看，顺时针旋转是负角度，逆时针旋转是正角度

二、代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3D切割轮播图</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 500px;

            height: 300px;

            margin: 100px auto 0;

            border: 1px solid #ccc;

            position: relative;

        }

        .box .imageBox{

            list-style: none;

            width: 100%;

            height: 100%;

        }

        .box .imageBox li{

            width: 100px;

            height: 100%;

            float: left;

            position: relative;

            /* 3D呈现 */

            transform-style: preserve-3d;

            transition: all 1s;

        }

        .box .imageBox li span{

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

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

        }

        /* 拼接立体容器:立体容器旋转中心在电脑平面上,每一个面的图片正面朝外 */

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

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

            transform: translateZ(150px);

        }

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

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

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

        }

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

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

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

        }

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

            background-image: url("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: -100px 0;

        }

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

            background-position: -200px 0;

        }

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

            background-position: -300px 0;

        }

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

            background-position: -400px 0;

        }

        .box .left,

        .box .right{

            position: absolute;

            top: 115px;

            width: 50px;

            height: 70px;

            background: rgba(255, 255, 0,0.1);

            text-align: center;

            line-height: 70px;

            font-size: 20px;

            color: #fff;

            text-decoration: none;

            font-weight: bold;

        }

        .box .right{

            right: 0;

        }

        .box .left{

            left: 0;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul class="imageBox">

            <!-- ,图片分五部分,五个li的第一个span放第一张图片,第二个span放第二张图片... -->

            <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 class="left" href="javascript:;">&lt;</a>

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

    </div>

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

    <script>

        $(function(){

            //点击切换图片(定义一个索引)

            var index=0;

            // 开关

            var flag=true;

            // 点击左边的按钮,上一张

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

                if(!flag) return false;

                flag=false;

                index--;

                var angle=-index*90;

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

                    // 设置不同的延时

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

                });

            });

            //点击右边的按钮,下一张

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

                if(!flag) return false;

                flag=false;

                index++;

                var angle=-index*90;

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

                    // 设置不同的延时

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

                });

            });

            //优化:重复点击的时候动画会层叠----使用节流阀flag

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

                // 最后一部分图片加载完毕

                flag=true;

            });

        });

    </script>

</body>

</html>

三、效果

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

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

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

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

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

  3. 3D切割轮播图

    预览图: 实现原理:将图片切割构建一个和ul(电脑屏幕)同一个轴的立方体,利用延时旋转实现切割效果 知识点:transform-style属性(必须搭配transform属性使用) 值 描述 flat ...

  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. js-BOM之offset家族、移动函数的封装升级（轮播图）

    Obj.style.width/obj.style.height与obj.offsetWidth/obj.offsetHeight的区别: <style> #div1{ height: 2 ...

随机推荐

  1. 【C#】上机实验三

    实验1: 定义一个 TimePeiod 类 包含: hour , minute , second 实现时间的在 时分秒上的加法. using System; using System.Collecti ...

  2. Spring Cloud--服务的发布与调用示例

    [Provider] 引依赖: 启动类上添加注解: 配置文件: [Consumer] 引依赖: 加注解: 配置文件: 调用服务: 方式一(动态获取服务列表): Eureka默认30秒拉取一次服务列表. ...

  3. 面试4 --- constructor必须与class同名,但方法不能与class同名?

    选 C “constructor必须与class同名,但方法不能与class同名”这句话是错误的,方法是可以和class同名的:方法可以和类名同名的,和构造方法唯一的区别就是,构造方法没有返回值.

  4. 在Firefox中操作iframe的一个小问题

    在做一个 Web 的打印功能时,需要将被打印的文档写到 iframe 的 document 中. <!doctype html> <html lang="en"& ...

  5. webapi session

    webapi中使用session 修改global.cs里面的内容 using System; using System.Web; using System.Web.Routing; using Sy ...

  6. Eclipse开发环境（二）：配置

    二.高级设置 1. 工作空间 在打开软件时,会提示用户选择工作空间,之后在Eclipse中创建的项目都会保存在这个工作空间(目录)下面. 在此把工作空间定为D:\workspaces\eclipse- ...

  7. 【洛谷 P3674】 小清新人渣的本愿（bitset，莫队）

    题目链接 因为每个数都是\(10^5\)以内,考虑直接用\(bitset\)维护. \(a-b=x\),其实就是看是否有\(p\)和\(p+x\)同时存在,直接\(bitset\)移位按位与一下就好了 ...

  8. UML系列——OO Unit4分析和学期总结

    一.本单元的架构设计 1.类图 第一次 第二次 2.关键方法和架构简述 总体而言是读取图的时候就完成大部分计算(完成缓存),调用查询方法时只是展示计算的结果,少部分直接计算.主要是设计了各种自己定义的 ...

  9. JavaScript的深浅复制

    JavaScript的深浅复制 为什么有深复制.浅复制? JavaScript中有两种数据类型,基本数据类型如undefined.null.boolean.number.string,另一类是Obje ...

  10. dpkg文件缺失问题

    sudo apt-get update 命中:1 http://security.ubuntu.com/ubuntu bionic-security InRelease         命中:2 ht ...