纯CSS3透明水晶盒（2）
作者：a287019674 来源：蓝色理想 发布时间：2011-08-24 20:20:06
标签：css3,透明,盒子
一、框架定位
初始化盒子面，顶好宽高、定位、背景色等属性，然后把变换原点设定在右上角。
盒子面一个个做，先从简单的入手，前后左右难度系数是一样的，一个斜切SKEW效果就可以实现，然后就是再分开定位：“前、后面”用skew(0deg,20deg);Y轴正向斜切，“左、右面”用skew(0deg,-20deg);Y轴负向斜切，然后再定位对齐，基本的框就出来了。
然后就是鸡肋“上、下面”，它需要旋转后斜切才能完成，所以难度系数也就上升了，这里我说“旋转后斜切”，而不是“斜切后旋转”，是有区别的，我的写法如下：
-moz-transform:rotate(-40deg) skew(30deg,20deg);
如果这样写：
-moz-transform:skew(30deg,20deg) rotate(-40deg);
那跟预期的效果不一样，确定了的斜切效果会因为后面的旋转而变形。
不知道你有没有亲手做过那个盒子，我在做的时候发现，为什么
它顶部的“盒子盖”比侧面的“盒子壁”多嵌套了一层DIV，用来分离transform变换效果，我尝试着只用一个DIV去实现，结果证明，只要先写rotate再skew就可以保持skew的斜切效果，从而html结构跟css代码也就简洁了很多。
0
投稿猜你喜欢
目录一、概念描述二、序列的可迭代性三、经典的迭代器模式四、生成器也是迭代器五、实现惰性迭代器六、使用生成器表达式简化惰性迭代器总结一、概念描- 本文实例为大家分享了python实现多张图片垂直合并的具体代码，供大家参考，具体内容如下# coding: utf-8 # image_me
- SQL Server 2008支持四种协议，Shared Memory；TCP/IP；Named Pipes和Virtual Interfa
- Erase语句：重新初始化固定数组的元素，并释放动态数组的存储空间。用法： Era
- 本文实例讲述了Python全局变量用法。分享给大家供大家参考，具体如下：全局变量不符合参数传递的精神，所以，平时我很少使用，除非定义常量。今
- 1. 打开百度搜索PyCharm进入官网，我们可以看到左边是专业版，右边是社区版，建议使用专业版，功能比较齐全。2. 双击安装包进
- 网上的很多PHP微信支付接入教程都颇为复杂，且需要配置和引入较多的文件，本人通过整理后给出一个单文件版的，希望可以给各位想接入微信支付的带来
- 我需要查询从现在算起五天前的日期。按照商业习惯，这五天应该不包含星期六和星期天。专家回答：对于许多跟商业日期有关的情况，最好的解决方案是使用
- 本文实例讲述了微信小程序MUI导航栏透明渐变功能。分享给大家供大家参考，具体如下：导航栏透明渐变效果实现原理1. 利用position:ab
- 1.背景一直苦恼于本地机器和服务器上都要配置一些机器学习方面的环境，今天花了点时间研究了下Jupter notebook远程访问服务器，所以
- 你的SQL Server最近是否运行不正常?不，我指的不是我们肯定会遇到的通常的数据库和操作系统问题。我的意思是，你是否经历过服务器的反应迟
- 这篇文章主要介绍了python调用摄像头的示例代码，帮助大家更好的理解和使用python，感兴趣的朋友可以了解下一、打开摄像头import
- 一个懒加载的树状表格实例实现一个树状表格，需要用到vxe-table这个库，虽然element-ui也能实现，但这个库是专门针对表格做了更多
- 1、登录mysqlmysql -uroot -p2、先查询都有哪些用户select host,user from mysql.user;红色
- 目录前言一、函数传参request参数request传两个参数前言有的测试用例，需要依赖于某些特定的case才可以执行，比如登录获取到tok
- 项目介绍采用广度优先搜索方法获取一个网站上的所有外链。首先，我们进入一个网页，获取网页的所有内链和外链，再分别进入内链中，获取该内链的所有内
- 不管是上学还是上班都会统计考勤，有些学校或公司会对每月缺卡次数过多(比如三次以上)的人员进行处罚。有些公司还规定对于基层员工要在工作日提交日
- 如何在Mac中配置Python虚拟环境1.安装virtualenvpip3 install virtualenv2.安装virtualenv
- 近些时间在开始学MySQL，安装挺顺利的，按照网上现成的教程就能安装成功。但是，在输入mysql -uroot -p再输入密码时，遇到了这个
- 一、变量1.变量Python 中的变量不需要声明。每个变量在使用前都必须赋值，变量赋值以后该变量才会被创建。在 Python 中，变量就是变
