<!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. Python3中替代Python2中cmp()函数的新函数(gt,ge,eq,le,lt)

    原文出处:http://blog.csdn.net/Artprog/article/details/52197779 Python3中已经不能使用cmp()函数了,被如下五个函数替代: import ...

  2. 团体程序设计天梯赛-练习集-L1-045. 宇宙无敌大招呼

    L1-045. 宇宙无敌大招呼 据说所有程序员学习的第一个程序都是在屏幕上输出一句“Hello World”,跟这个世界打个招呼.作为天梯赛中的程序员,你写的程序得高级一点,要能跟任意指定的星球打招呼 ...

  3. 博弈论题目总结（二）——SG组合游戏及变形

    SG函数 为了更一般化博弈问题,我们引入SG函数 SG函数有如下性质: 1.如果某个状态SG函数值为0,则它后继的每个状态SG函数值都不为0 2.如果某个状态SG函数值不为0,则它至少存在一个后继的状 ...

  4. Vue 项目的搭建

    1.已经安装node 2.vue init webpack --s 3.vue init webpack-simple my-webpack-simple-demo (创建的项目结构不完整)  web ...

  5. html绑定点击事件传值

    1.方法1function radioSelect(event){ var valueRadio=event.value; if(valueRadio =='目的口岸'){ return '目的口岸' ...

  6. LightOJ1234 Harmonic Number

    /* LightOJ1234 Harmonic Number http://lightoj.com/login_main.php?url=volume_showproblem.php?problem= ...

  7. 【ACM】nyoj_540_奇怪的排序_201308050951

    奇怪的排序时间限制:1000 ms  |  内存限制:65535 KB 难度:1描述 最近,Dr. Kong 新设计一个机器人Bill.这台机器人很聪明,会做许多事情.惟独对自然数的理解与人类不一样, ...

  8. nginx配置文件使用

    nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; 全局错误日志定义类型,[ debug | info | notice | warn | error | cri ...

  9. asp.net--WebService知识点

    开头是这样的 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = Wsi ...

  10. [bzoj2124]等差子序列_线段树_hash

    等差子序列 bzoj-2124 题目大意:给定一个1~n的排列,问是否存在3个及以上的位置上的数构成连续的等差子序列. 注释:$1\le n\le 10^4$. 想法:这题就相当于是否存在3个数i,j ...