<!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. Memcached 之取模与哈希算法命中率实验

    当5台memcache服务器中有一台宕机时的命中率实验. 一.php实现代码 1. config.php $server = array( "A" => array(&quo ...

  2. webpack学习（六）—webpack+react+es6（第3篇）

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  3. 招银网络面试题、考点、知识点总结（Java岗）

    java基础 全是基础不用多说肯定考的多,尤其是招银 OOP特性/java语言特性:封装.继承.多态 多态具体的表现:多态应用举例.如何调用父类方法(super).重写和重载(重写父类方法的规则.构造 ...

  4. RabbitMQ出现服务启动几秒退出问题

    最近在学习rebbitmq, 1.首先安装了otp_win64_20.3, 2.erlang安装完成需要配置erlang环境变量: 这个是新建的 文档是:ERLANG_HOME D:\develop\ ...

  5. loadrunner报错总结

    1.报错   没有缓存空间可用   TCP超时释放时间?是解决刚才那个报错的? 解决方法如下  修改TcpTimedWaitDelay值为1和MaxUserPort值为65534.最后,重启!  完美 ...

  6. TeX中的引号（Tex Quotes, UVa 272）

    在TeX中,左双引号是“``”,右双引号是“''”.输入一篇包含双引号的文章,你的任务是 把它转换成TeX的格式. 样例输入: "To be or not to be," quot ...

  7. 关于Java中返回零长度数组或空集合比较好，还是返回null这个问题的一些想法

    近日在方法返回类型为List数据类型时,返回结果为空集合比较好,还是null比较好的问题上有点纠结. 我觉得应该统一返回空集合,这样可以不用进行空指针的判断,不然又多了一个产生bug的可能性.而有人认 ...

  8. 重命名文件及html

    import os import nltk from bs4 import BeautifulSoup as bs def get_txt_name_from_bak_name(bak_name): ...

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

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

  10. CODEVS——T 2618 核电站问题

    http://codevs.cn/problem/2618/  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description ...