纯CSS3透明水晶盒（2）

一、框架定位

初始化盒子面，顶好宽高、定位、背景色等属性，然后把变换原点设定在右上角。

盒子面一个个做，先从简单的入手，前后左右难度系数是一样的，一个斜切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代码也就简洁了很多。