一、框架定位
初始化盒子面,顶好宽高、定位、背景色等属性,然后把变换原点设定在右上角。
盒子面一个个做,先从简单的入手,前后左右难度系数是一样的,一个斜切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代码也就简洁了很多。
出处:蓝色理想
责任编辑:bluehearts
上一页 纯CSS3透明水晶盒 [1] 下一页 纯CSS3透明水晶盒 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|