中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

一、框架定位

初始化盒子面，頂好寬高、定位、背景色等屬性，然后把變換原點設定在右上角。

盒子面一個個做，先從簡單的入手，前后左右難度系數(shù)是一樣的，一個斜切SKEW效果就可以實現(xiàn)，然后就是再分開定位：“前、后面”用skew(0deg,20deg);Y軸正向斜切，“左、右面”用skew(0deg,-20deg);Y軸負向斜切，然后再定位對齊，基本的框就出來了。

然后就是雞肋“上、下面”，它需要旋轉后斜切才能完成，所以難度系數(shù)也就上升了，這里我說“旋轉后斜切”，而不是“斜切后旋轉”，是有區(qū)別的，我的寫法如下：

-moz-transform:rotate(-40deg) skew(30deg,20deg);

如果這樣寫：

-moz-transform:skew(30deg,20deg) rotate(-40deg);

那跟預期的效果不一樣，確定了的斜切效果會因為后面的旋轉而變形。

不知道你有沒有親手做過那個盒子，我在做的時候發(fā)現(xiàn)，為什么
它頂部的“盒子蓋”比側面的“盒子壁”多嵌套了一層DIV，用來分離transform變換效果，我嘗試著只用一個DIV去實現(xiàn)，結果證明，只要先寫rotate再skew就可以保持skew的斜切效果，從而html結構跟css代碼也就簡潔了很多。

出處：藍色理想
責任編輯：bluehearts

上一頁 純CSS3透明水晶盒 [1] 下一頁 純CSS3透明水晶盒 [3]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。