纯CSS3透明水晶盒
作者：a287019674 来源：蓝色理想 发布时间：2011-08-24 20:20:06
打过了趟深圳回来后，已经快半个月，在广州购书中心逛了下，发现2本前端书《重构HTML-改善WEB应用的设计》、《CSS3 实战》，看了一半《重构HTML》，发现看不下去，里面写的感觉不是很受用，可能是现在水平有限，参透不了，于是放下看《CSS3》。之前脑子里面的CSS3都是在网上看的。这次买了本书，踏踏实实的打个大框架出来，免得过段时间不用又乱了文理，基本把书过了一遍后，手也就痒痒的，想做个东西出来。
相信大家有看过这个例子：3D盒子，应该他是最早这样写的吧，书上第282页有个综合实战“设计动态立体盒子”的例子，实现方式跟它一样，我的盒子也是以它为原型来设计的，不过在实现方面有做修改、优化，以及增添了一些细节，下面是我的盒子Firefox截图：
透明化了盒子，通透性强了，因为透明了，所以背部的三个面也就要做出来了，所以总共6个面，比原作多3个；
投影镜像，让盒子的立体感更强烈；
边角线的处理，让盒子面与面之间过渡和谐
你可以点击这里下载 ：
rotate.html （4.55 KB）（只是写了moz下的效果，webkit的就没写了）
盒子的HTML结构很简单，如下：
<div class="box">
<div class="inBox box_before">前</div>
<div class="inBox box_back">后</div>
<div class="inBox box_left">左</div>
<div class="inBox box_right">右</div>
<div class="inBox box_top">上</div>
<div class="inBox box_bottom">下</div>
</div>
一个大盒子包住“前、后、左、右、上、下”6个面，因为定位产生层高的关系，所以它的顺序其实是“后、下、左、前、上、右”，下面的div就会自然的叠在上面，就可以不写z-index了。
0
投稿猜你喜欢
- 我的PJBlog在从2.7升级的3.0的时候，犹豫了很久。升级到PJBlog3.0就是看中了新增的静态页面功能，但是同时又担心造成博客出现大
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 22 - Fx.Elements通过
- IE在处理透明度上真够恶心，而且在IE7必须让元素的hasLayout为ture，要不会失效。以下是我最新处理透明度的代码：var
- 年初的时候收藏过一篇关于mysqlreport的报表解读，和内置的show status,和show variables相比mysqlrep
- ASP实现防止网站被采集代码如下:<％ Dim AppealNum,AppealCount Appeal
利用 CSS 框架，可以简化你的工作，提高工作效率。CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表- 来自某个nb招聘的题目：请给Array本地对象增加一个原型方法，它的用途是删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重
- 关于导航栏的设计有很多特效，但你浏览过这样一种导航栏特效吗？当鼠标移到导航栏目上时，导航栏目会被一层“
- BOF 指示当前记录位置位于 Recordset 对象的第一个记录之前。EOF 指示当前记录位置位于 Recordset 对象的最后一个记录
- 这是一个非常简单的解决方案，柱状图中每一条柱都是一个 div，数据的大小呈现在 div 的宽或高上。 查看演示 例子下载实现的原理
- 代码如下:'文字水印 Function WordWatermark(ImagePath) Dim&nb
- 前几天，看到有人写了个superLink的东东，主要的做什么用呢？我们有时会给在大块元素加个window.location='htt
- ie的javascript失效了，不是设置的问题那么就可能是以下几点问题了~安装KAV可能会破坏系统的javascript关联，失javas
- chr(13) 是一个回车Chr(10) 是一个换行符chr
- 注：我指一个网站被第三方网站以iframe的形式调用时，被调用网站的禁止策略 和 调用网站的突破禁止策略，跟XSS麽关系，但跟clickja
- 什么是F型浏览？2006年4月，美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森（Jakob Nielsen）发表了一项《眼球轨迹的研究
- 来自巴西的设计师Roger Oddone的作品，通过此作品你可以了解到logo的设计的一些思路。
- 如何做一个分页程序？ 这在ASP中确实容易实现，但需要技巧，看看下面的分页代码和说明： <angu
- SQL Server四类数据仓库建模的方法主要分为以下四类。第一类是关系数据库的三范式建模，通常我们将三范式建模方法用于建立各种操作型数据库
- 尽管可能是个比较老的话题了，但是我还是从来没有整理过。今天在《精通HTML》一书中看到，这里整理一下。在XHTML中，<html>
