3D banner(CSS3+HTML5)

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)的更多相关文章

超酷 CSS3/HTML5 3D 飘带菜单实现教程
今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D ...
8个3D视觉效果的HTML5动画欣赏
现在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验.本文收集了8个非常炫酷的3D视觉效果的HTML5动画,都有源代码分享,你可以学习你感 ...
3D Banner(jQuery)
1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer: 2.将代码黏贴成html文件,直接用浏览器打开即可: 3.layer属于弹窗提示类插件,可能需要 ...
CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局
原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局效果演示实现原理使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...
CSS3+HTML5特效9 - 简单的时钟
原文:CSS3+HTML5特效9 - 简单的时钟效果演示(加快了100倍) 实现原理利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...
js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
学习笔记第十二章 CSS3+HTML5网页排版
第12章 CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签正确使用HTML5语义元素能够设计符合标准的网页结构 12.1 使用结构标签在制作网页时,不仅需要使用< ...
七夕节表白3d相册制作(html5+css3)
七夕节表白3d相册制作涉及知识点定位阴影 3d转换动画主要思路: 通过定位将所有照片叠在一起,在设置默认的样式以及照片的布局,最后通过设置盒子以及照片的旋转动画来达到效果. 代码如下: &l ...
8款强大的CSS3/HTML5动画及应用源码
1.CSS3 jQuery UI控制滑杆插件今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮.另 ...

随机推荐

WaitType：CXPACKET
CXPACKET 等待类型是SQL Server 并发执行一个query时产生的.在run一个big query时,SQL Server充分利用系统的所有资源(CPU,Memory,IO),在最短时间 ...
Npoi导出Excel 实战篇（Webform）
开篇语废话不多说,直接上遇到的问题需求:在这个界面点击导出,导出页面数据,苦于没有做过webfrom项目,弄了半天还是没想到原生态的好方法,所以在网上看了下有没有导出的好例子,结果发现有人推荐使用 ...
OpenCascade MeshVS Usage
OpenCascade MeshVS Usage eryar@163.com Abstract. MeshVS means Mesh Visualization Service. It can be ...
Minor【 PHP框架】2.第一个应用与请求的生命周期
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
Android探索之BroadcastReceiver具体使用以及安全性探究
前言: 最近的计划是学习一下iOS的NSNotificationCenter,突然想起来的Android的广播机制,所以还是觉得先对BroadcastReceiver来个全面的总结然后再去学习NSNo ...
Notes: DOM Range
通过DOM范围可以选择文档中的某个区域,而不需考虑节点的界限,例如文本高亮的处理就可以使用范围来实现. 1.Range的创建使用document的createRange来创建一个范围,该方法返回一个 ...
支持向量机原理(四)SMO算法原理
支持向量机原理(一) 线性支持向量机支持向量机原理(二) 线性支持向量机的软间隔最大化模型支持向量机原理(三)线性不可分支持向量机与核函数支持向量机原理(四)SMO算法原理支持向量机原理(五) ...
【续集】在 IIS 中部署 ASP.NET 5 应用程序遭遇的问题
dudu 的一篇博文:在 IIS 中部署 ASP.NET 5 应用程序遭遇的问题针对 IIS 部署 ASP.NET 5 应用程序的问题,在上面博文中主要采用两种方式尝试: VS2015 的 Publ ...
php广告图片循环播放幻灯片效果
<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...
JS去除空格方法记录
JS中去掉空格 //去除空格 String.prototype.Trim = function() { return this.replace(/\s+/g, ""); ...

3D banner(CSS3+HTML5)

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

随机推荐

热门专题