1.这是一篇 3Dbanner制作的简易流程,支持高版本的chrome和firefox浏览器,俩浏览器显示可能会有些差异

2.没有兼容性代码,因为仅仅只是熟悉流程,希望小伙伴们自己改善哈(>﹏<。)

3.代码中有注释,代码直接复制,粘贴成.html的文件,用浏览器打开即可

4.貌似不支持3D环境,所以没有效果,只能附图

代码如下:

<!doctype html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="1的N次幂">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>3D banner</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:14px;
            overflow:hidden;
        }
        a{
            text-decoration:none;
            font-size:14px;
            color:#fff;
        }
        ul li,ol{
            list-style-type:none;
        }
        .bg_img{
            width:100%;
            height:100%;
        }
        .bg_img img{
            width:100%;
            height:100%;
            position:fixed;
            top:0;
            left:0;
        }
        .container{
            margin-top:150px;
            width:100%;
            height:100%;
        }
        .container .banner{
            margin:auto;
            width:640px;
            height:200px;
            perspective:800px;/*设置透明深度(类似于看电影选位置,选个好位置才能看得更清楚)*/

        }
        .container .banner ul{
            width:640px;
            height:200px;
        }
        .container .banner ul li{
            width:160px;
            height:200px;
            position:relative;
            transform-style:preserve-3d;/*设置3d环境,必须设置之后才有3d效果*/
            float:left;
            transition:all 2s ease;
        }
        .container .banner ul li div{
            width:160px;
            height:200px;
            position:absolute;
            text-align:center;
            line-height:300px;
        }
        /*Start 设置背景图片、旋转角度和旋转轴*/
        /*
        li div:nth-child(n):表示li下面可能有很多个div,但是我只选中了第n个div,n表示索引(该索引从1开始)
        transform:translateZ(150px);表示沿着Z轴正方向移动150px
        transform: rotateX(90deg);表示远着X轴旋转正的90度
        */
        .container .banner ul li div:nth-child(1){
            top:-200px;
            transform:translateZ(100px) rotateX(90deg);
            transform-origin:bottom;
            background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_1.jpg") no-repeat center center;
            background-size:640px 200px;
        }
        .container .banner ul li div:nth-child(2){
            top:200px;
            transform:translateZ(100px) rotateX(-90deg);
            transform-origin:top;
            background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_2.jpg") no-repeat center center;
            background-size:640px 200px;
        }
        .container .banner ul li div:nth-child(3){
            transform:translateZ(100px);
            background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_3.jpg") no-repeat center center;
            background-size:640px 200px;
        }
        .container .banner ul li div:nth-child(4){
            transform:translateZ(-100px) rotateX(180deg);
            background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_4.jpg") no-repeat center center;
            background-size:640px 200px;
        }
        /*Start 设置背景图片、旋转角度和旋转轴*/

        /*左右两边的看不到,所以这部分代码不需要(仅仅做测试使用)*/
        /* .container .banner ul li div:nth-child(5){
            right:200px;
            width:300px;
            transform:translateZ(150px) rotateY(-90deg);
            transform-origin:right;

        }
        .container .banner ul li div:nth-child(6){
            left:200px;
            width:300px;
            transform:translateZ(150px) rotateY(90deg);
            transform-origin:left;
        }
      */

        /* Start 背景定位*/
        /*
            ul li:nth-child(n) div:表示ul下面可能有很多个li,但是我只选中第n个li下面的所有div
        */
        .container .banner ul li:nth-child(1) div{
            background-position:0;
        }
        .container .banner ul li:nth-child(2) div{
            background-position:-160px;
        }
        .container .banner ul li:nth-child(3) div{
            background-position:-320px;
        }
        .container .banner ul li:nth-child(4) div{
            background-position:-480px;
        }
        /* End 背景定位*/
        /*Start 添加hover事件,让banner动起来*/
        /*
        transition;表示一个时间过度或者是持续时间,它是一个过程。
        transition:all 2s linear;表示全部的效果都用两秒钟去完成(过度),效果是linear,还有其他效果,可以参考手册,其他的我也没用过(>﹏<。)~呜呜呜……
        */
        .banner:hover ul li{
            transform:rotateX(270deg);
            transition:all 2s linear;
        }
        /*End 添加hover事件,让banner动起来*/
    </style>
 </head>

 <body>
    <!--设置一个背景图-->
     <div class="bg_img">
        <img src="http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_bgs.jpg"/>
    </div>
    <!--start banner-->
    <div class="container">
        <div class="banner">
            <ul>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li style="z-index:-1;">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
            </ul>
        </div>
    </div>
    <!--End banner-->
 </body>
</html>

效果大概是这样的:附图

解释:事实上,我们把banner用4个li分成了4分,每份用4个div又分成了4分,li是将banner分成4个块,li里面的div用来背景定位的,为什么要这么做呢,是因为我们将做一个更炫酷的banner,我会在下一片博客中写到。分成四分效果图如下,

3D banner(CSS3+HTML5)的更多相关文章

  1. 超酷 CSS3/HTML5 3D 飘带菜单实现教程

    今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D ...

  2. 8个3D视觉效果的HTML5动画欣赏

    现在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验.本文收集了8个非常炫酷的3D视觉效果的HTML5动画,都有源代码分享,你可以学习你感 ...

  3. 3D Banner(jQuery)

    1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer: 2.将代码黏贴成html文件,直接用浏览器打开即可: 3.layer属于弹窗提示类插件,可能需要 ...

  4. CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  5. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  6. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  7. 学习笔记 第十二章 CSS3+HTML5网页排版

    第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用< ...

  8. 七夕节表白3d相册制作(html5+css3)

    七夕节表白3d相册制作 涉及知识点 定位 阴影 3d转换 动画 主要思路: 通过定位将所有照片叠在一起,在设置默认的样式以及照片的布局,最后通过设置盒子以及照片的旋转动画来达到效果. 代码如下: &l ...

  9. 8款强大的CSS3/HTML5动画及应用源码

    1.CSS3 jQuery UI控制滑杆插件 今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮.另 ...

随机推荐

  1. Java基础-服务器的发送和接收

    package hanqi.test; import java.io.IOException; import java.io.OutputStream; import java.io.PrintWri ...

  2. Conditional Split component 用法

    Conditional Split 用于将数据流按照条件进行拆分,每一个output 都有name和condition. 数据流逐行按照condition进行match,如果match,那么改行会进入 ...

  3. 《JS设计模式笔记》 3,观察者模式

    <script type="text/javascript"> //挂插着模式又叫发布订阅模式应该是最常用的模式 //1,dom事件就是观察者模式,只要订阅了click ...

  4. ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

    显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

  5. 为 Neutron 准备物理基础设施(II) - 每天5分钟玩转 OpenStack(76)

    本节将按照上一节的规划安装配置控制节点和计算节点. 控制节点 devstack-controller 步骤如下 安装 Ubuntu 14.04 此处省略 256 个字 配置网卡 编辑 /etc/net ...

  6. Quartz 在 Spring 中如何动态配置时间--转

    原文地址:http://www.iteye.com/topic/399980 在项目中有一个需求,需要灵活配置调度任务时间,并能自由启动或停止调度. 有关调度的实现我就第一就想到了Quartz这个开源 ...

  7. 1Z0-053 争议题目解析486

    1Z0-053 争议题目解析486 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 486.You execute the following Recovery Manager (R ...

  8. 【JavaScript】又一神器框架:linq.js

    引言 前几天针对一个js数组交集的问题请教了下同事,他第一反应就是循环,这也是常规思路,因为我个人更倾向于js些,我便开玩笑,不知道js能不能像linq那样实现这些操作呢?果断百度了一把,果然有现成框 ...

  9. mybatis入门基础(二)----原始dao的开发和mapper代理开发

    承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...

  10. git log命令全解析,打log还能这么随心所欲!

    git log命令非常强大而好用,在复杂系统的版本管理中扮演着重要的角色,但默认的git log命令显示出的东西实在太丑,不好好打扮一下根本没法见人,打扮好了用alias命令拍个照片,就正式出道了! ...