<!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. redis与其可视化工具在win7上的安装

    步骤 1.下载安装Redis服务. 2.调用执行文件创建服务器以及测试缓存. 3.使用可视化工具redis-desktop-manager管理查询缓存. 1.下载安装Redis服务. 下载地址:htt ...

  2. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  3. Day7 字符串和常用数据结构

    字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...

  4. markdown让文字居中和带颜色

    markdown让文字居中和带颜色 markdown让文字居中和带颜色1.说明2. 文字的居中3.文字的字体及颜色3.1 字体更换3.2 大小更换3.3 颜色替换4 总结 1.说明 本文主要叙述如何写 ...

  5. python笔记之json报错

    写爬虫的过程中不免遇到处理json数据的情况,今天在爬取新华网新闻数据时发现使用json.loads函数时报错: json.decoder.JSONDecodeError: Expecting val ...

  6. Netty学习总结（3）——Netty百万级推送服务

    1. 背景 1.1. 话题来源 最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...

  7. Java中最小的整数为什么是-2147483648

    Java中最小的整数为什么是-2147483648 假如只有两位来表示数字,第一位是符号位: 00:0 01:1 11:-1,这个是负数,而且是补码,取反为00,加1成为01,就是-1 10:-2,这 ...

  8. hdu5326 Work

    题目链接:点击打开链接 题目大意:有n个人.各自管理不同的人,问有多少人管理k个人. 思路:先记录每一个人的直接上级.然后模拟路径压缩的过程进行计数求和. #include<stdio.h> ...

  9. structs实现三种action的方法

    第一种:一般类,带有public String execute()方法. 另外一种:继承LoginActionInterface implements Action接口的类. 第三种:继承LoginA ...

  10. Python——迭代器和解析(3)

    用迭代工具模拟zip和map ====================================================================== 我们已经知道了zip怎样组合 ...