<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

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

    <style>

        body {

            margin: 0;

            padding: 0;

        }

        ul {

            margin: 0;

            padding: 0;

            list-style: none;

            height: 100%;

            width: 100%;

        }

        .view {

            width: 560px;

            height: 300px;

            border: 1px solid #ccc;

            margin: 100px auto;

            position: relative;

        }

        /*大盒子*/

        .view ul {

            width: 560px;

            height: 300px;

            /*3d呈现*/

            /*transform-style: preserve-3d;*/

        }

        .view ul li {

            width: 112px;

            height: 300px;

            float: left;

            position: relative;

            /*3d呈现*/

            transform-style: preserve-3d;

        }

        .view ul li span {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

        }

        .view ul li span:nth-child(1) {

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

            background-repeat: no-repeat;

            transform:translateZ(150px);

        }

        .view ul li span:nth-child(2) {

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

            background-repeat: no-repeat;

            transform: translateY(-150px) rotateX(90deg);

        }

        .view ul li span:nth-child(3) {

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

            background-repeat: no-repeat;

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

        }

        .view ul li span:nth-child(4) {

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

            background-repeat: no-repeat;

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

        }

        .view ul li:nth-child(2) span {

            background-position: -112px;

        }

        .view ul li:nth-child(3) span {

            background-position: -224px;

        }

        .view ul li:nth-child(4) span {

            background-position: -336px;

        }

        .view ul li:nth-child(5) span {

            background-position: -448px;

        }

        /*3d转换 旋转*/

        .view ul li {

           transition: all 1s;

            /*transform: translateZ(150px);*/

            /*transform-origin: center center -150px;*/

        }

        /*按钮*/

        .prev, .next {

            display: block;

            width: 60px;

            height: 60px;

            text-align: center;

            line-height: 60px;

            margin-top: -30px;

            font-size: 40px;

            color: #FFF;

            text-decoration: none;

            background-color: rgba(0, 0, 0, 0.5);

            position: absolute;

            top: 50%;

        }

        .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="prev">&lt;</a>

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

</div>

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

<script>

    $(function () {

        var count = 0;

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

            count ++;

            $('li').css('transform','rotateX('+count*90+'deg)').each(function(index){

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

            });

        })

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

            count -- ;

            $('li').css('transform','rotateX('+count*90+'deg)').each(function(index){

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

            });

        })

    });

</script>

</body>

</html>

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

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

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

  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. CSS3最简洁的轮播图

    <!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...

  6. js访3d上下轮播图

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

  7. CSS3,3D效果轮播图

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

  8. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  9. transform—切割轮播图

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

随机推荐

  1. eas之dep的前置脚本和后置脚本

    dep的前置脚本和后置脚本,什么时候写,是这样解释的:    前置脚本是在方法前执行,后置脚本是在方法后执行    1.比如保存扩展,如果你要在保存前校验某个字段的值,你要在前置脚本中写,如果要保存后 ...

  2. Hzoi 2018.2.11多边形 区间DP

    给定一个由N个顶点构成的多边形,每个顶点被赋予一个整数值,而每条边则被赋予一个符号:+(加法运算)或者*(乘法运算),所有边依次用整数1到N标识. 一个多边形的图形表示 首次移动,允许将某条边删除: ...

  3. 51nod1289 大鱼吃小鱼

    有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游动,有的向左,有的向右.游动的速度是一样的,两条鱼相遇大鱼会吃掉小鱼.从左到右给出每条鱼的大小和游动的方向(0表示向左,1表示向右).问足够长的时间之后 ...

  4. 49.filter、query比较

    主要知识点 1.filter与query用在同一次查询中的语法 2.filter与query使用场景对比 3.二都的性能比较     一.filter与query示例 1.先准备数据 PUT /com ...

  5. windows 下关于nginx的操作

    在nginx安装目录下操作 1.启动:start nginx 2.停止:① nginx.exe -s stop ②nginx.exe -s quit   注:stop是快速停止nginx,可能并不保存 ...

  6. 1.IDEA的安装

    .1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

  7. qtp12版本下载安装破解教程

    下载链接:https://download.csdn.net/download/weixin_41479750/11240466 下面是安装教程: 解压完成之后,双击运行setup.exe 之后点击运 ...

  8. DBMS_SPACE包的使用

    最近有朋友问到了DBMS_SPACE包的使用,也看了一下,大部分是关于dbms_space.space_usage的使用,space_usage这个过程的例子已经很多了,我也就不再多说了,除了这个过程 ...

  9. 洛谷 P2483 BZOJ 1975 [SDOI2010]魔法猪学院

    题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig对猪世界的世界本原有了很多的了解:众所周知,世界是由元素构成的:元素与 ...

  10. Macserver服务更新经常使用的几个shell命令

    Macserver须要先开启远程登录.开启方式:系统偏好设置->共享 勾选远程登录 经常使用命令有: 拷贝(把本机文件复制到远程server上) scp -r 本地路径/file userNam ...