<!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. mac系统下安装、启动、停止mongodb

    mongodb是非关系型数据库,mysquel是关系型数据库,前者没有数据表这个说法,后者有 一. 下载nodejs,安装,一直到 node -v显示版本号,表示安装成功. 二. 本文主要讲解,安装包 ...

  2. 修复Thinkphp框架5.0和5.1版本的远程代码执行安全漏洞

    由于框架对控制器名没有进行足够的检测会导致在没有开启强制路由的情况下可能的getshell漏洞.最直接的影响为index.php直接被篡改成首页html的内容! 5.0版本 thinkphp/libr ...

  3. Python 集合 day3

    集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,集合用{},里面是一个一个元素,不同于key-value形式的字典: 注意:创建一个空集合必须用 s ...

  4. 11.5 【Linq 】连接

    11.5.1 使用 join 子句的内连接 如果你打算把一个巨大的序列连接到一个极小的序列上,应尽可能把小序列作为右边序列 class Program { static void Main(strin ...

  5. 爬虫系列(十二) selenium的基本使用

    一.selenium 简介 随着网络技术的发展,目前大部分网站都采用动态加载技术,常见的有 JavaScript 动态渲染和 Ajax 动态加载 对于爬取这些网站,一般有两种思路: 分析 Ajax 请 ...

  6. 10.shard、replica机制及单node下创建index

    主要知识点     1.shard&replica机制梳理 2.单node环境下创建index的情况     1.shard&replica机制再次梳理     (1)index包含多 ...

  7. 【1】Django概述

    道生一,一生二,二生三,三生万物 无名天地之始,有名万物之母 ——老子 python程序web项目开发,是非常重要的一部分,Python为基础的web项目开发的框架有很多,django无疑是最强大we ...

  8. layer 使用教程

    http://layer.layui.com/ <!DOCTYPE html><html lang="en"><head> <meta c ...

  9. elasticsearch实战 中文+拼音搜索

    需求 雪花啤酒  需要搜索雪花.啤酒 .雪花啤酒.xh.pj.xh啤酒.雪花pj ik导入 参考https://www.cnblogs.com/LQBlog/p/10443862.html,不需要修改 ...

  10. Jackson 过滤属性

    jackson过滤属性分为静态和动态两种. 静态如下: 定义两个Bean 先,这两个bean 是父子关系. public class User { private String name; priva ...