纯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
投稿猜你喜欢
- 即使在不太复杂的样式表中，也可能会有两个或者更多个规则找到同一元素。CSS通过一个叫做层叠（cascade）的过程处理这种冲突。
pytorch中的 2D 卷积层 和 2D 反卷积层 函数分别如下：class torch.nn.Conv2d(in_channels, o- 最近在用vue做项目，学习了不少东西，但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得，因为是新手，所以可能会有错误的地方
- IEBlog公布了开发中的Internet Explorer 8 Beta2版本的最新功能.IE8 Beta2在第一个版本的基础上做出了很大
- scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的
- 判断字符串是否为空var strings = ''; if (string.length == 0) { alert(
- 这篇文章主要介绍了Python如何基于smtplib发不同格式的邮件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
- 今天安装了ubuntu的虚拟机，并安装了mysql8.0.28版本的数据库，供大家参考，具体内容如下修改密码改了挺长时间，记录下安装过程安装
- 关于target="_blank"去留的问题在网上已经被反复争议很多次了。有的说要留，有的说要去掉。主张留的一方主要是考
- 本例设置为垂直左侧scroll主要思想是利用一个长度为0的mid_frame，高度为待设置qwidget的高度，用mid_frame的mov
- SQL JOIN 连接SQL JOIN 子句用于把来自两个或多个表的行结合起来，基于这些表之间的共同字段。最常见的 JOIN 类型：SQL
- 概述据说fastapi是目前最快的异步框架，遂决定将其和django异步进行并发比较。先说结果fastapi的异步可以使整体运行速度非常均衡
- 问题背景VSCode是我们开发go程序的常用工具，但是安装VSCode成功后，创建一个.go文件会有如下提示：这个是vscode提示你需要安
- 本文实例讲述了Python基于socket模块实现UDP通信功能。分享给大家供大家参考，具体如下：一 代码1、接收端import socke
- 本文实例为大家分享了python和shell监控linux服务器的具体代码，供大家参考，具体内容如下1、 shell监控负载监控原理：使用u
- 应用场景：1、授权(Authorization)装饰器能有助于检查某个人是否被授权去使用一个web应用的端点(endpoint)。它们被大量
- 进行NodeJs开发时偶然发现的一个雷点正常情况下从JSON文件读取到字符后再通过JSON.parse没什么问题，只要格式不出错有时在确保J
- python中eval和int的区别是什么？下面给大家介绍一下:1.eval()函数eval(<字符串>)能够以Python表达
- Vim是全平台上一个高度可拓展的编辑器。它本身只是一个简陋的编辑器，但是因为有各种插件而变得强大。使用Vim编写代码就不免遇到代码补全的问题
- 遍历并修改图像像素值在使用opencv处理图像时，有时需要对图像的每个像素点进行处理，比如取反、修改值等操作，就需要通过h和w遍历像素。依然
