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渲染,所以外观更加漂亮.另 ...
随机推荐
- Python 学习之路 （前言）
为什么要学Python 1,脚本语言本身很方便简洁,未来会有趋势 2,web 方向 3,运维方向 我是学静态语言出身的,java,毕业后从事android 应用开发,曾在工作期间学习过linux,想 ...
- 解密jQuery事件核心 - 模拟事件（四）
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- 前端学PHP之命名空间
× 目录 [1]定义 [2]多命名空间 [3]名称解析[4]访问内部元素[5]全局空间[6]别名和导入 前面的话 从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在 ...
- Android之OptionsMenu与Notification的实现
OptionsMenu是Android提供的一种菜单方式,我们知道当智能机刚兴起时,手机上都会有一个MENU(菜单键),当我们点击时,默认我们打开Android提供的默认菜单,本篇我么就一起来学一下, ...
- 2014年百度之星程序设计大赛 - 初赛（第二轮）Chess
题目描述:小度和小良最近又迷上了下棋.棋盘一共有N行M列,我们可以把左上角的格子定为(1,1),右下角的格子定为(N,M).在他们的规则中,“王”在棋盘上的走法遵循十字路线.也就是说,如果“王”当前在 ...
- 你真的了解load方法么？（转载）
本文授权转载,作者:左书祺(关注仓库,及时获得更新:iOS-Source-Code-Analyze) 因为 ObjC 的 runtime 只能在 Mac OS 下才能编译,所以文章中的代码都是在 Ma ...
- 【Kylin实战】邮件报表生成
在cube build完成后,我的工作是写sql生成数据分析邮件报表.但是,问题是这种重复劳动效率低.易出错.浪费时间.还好Kylin提供RESTful API,可以将这种数据分析需求转换成HTTP请 ...
- [开源ORM] SqliteSugar 3.x .net Core版本成功上线
SqliteSqlSugar 3.X API 作为支持.NET CORE 为数不多的ORM之一,除了具有优越的性能外,还拥有强大的功能,不只是满足你的增,删,查和改.实质上拥有更多你想像不到的功能,当 ...
- php 简单权限管理实现
权限管理介绍.与简单实现思想 权限管理 此函数为模块访问权限管理 实现思路为:根据传进来的权限值,进入不同的权限获取区间,然后根据模块名字判断是否有这个模块的访问权限 使用说明:在每一个模块开始之前调 ...
- Python解析非标准JSON（Key值非字符串）
采集数据的时候经常碰到一些JSON数据的Key值不是字符串,这些数据在JavaScript的上下文中是可以解析的,但在Python中,没有该部分数据的上下文,无法采用json.loads(JSON)的 ...