CSS3 現況

• 一堆方便的選取器（讓你不用加一堆 class 好貼心）
• 圓角（為什麼有圓角之後大家都用扁平化直角了？怒！）
• 陰影（設計師的內心不再有陰影）
• 變形（i am Megatron(密卡登)？）
• 動畫（Flash：哭哭...）
• 盒/box屬性（手機排版好開心）
• 新的Flex排版技術（IE 你.......）
• 依舊找不到爸爸(咦？)（阿爸你抵兜味？我怎麼找不到你？）
• 竟然有3D功能！（喂！太超過了喔！）

常見問題

• 瀏覽器支援度?（客戶口袋的深度決定支援的程度）
• 客戶接受度?（只要不用錢我都可以接受）
• 可以做到什麼程度？（你是想做到多複雜？）
• 效能如何？（好！）
• 怎麼寫？（當然不會是客戶自己寫）

3D屬性

• 透視點 perspective
• 透視原點 perspective-origin
• 變形原點 transform-origin
• 變形樣式 transform-style
• 變形屬性 transform

透視點

• 寫在自己身上(只能自己用)
• 寫在爸爸身上(子孫共享)
• 要寫多大？

perspective

也就是眼睛與螢幕的距離
只是設定距離，並不影響物件尺寸

perspective-origin

也就是眼睛對到螢幕的2D平面位置
預設是正中間

transform-origin

定義變形原點
預設是正中間

transform-style

變形樣式
預設是平面 flat

• flat (平面-預設值)
• preserve-3d （3D-預設不繼承）

transform

變形

• scale 比例
• skew 傾斜
• rotate 旋轉
• translate 位移

大概是長成下面這樣

                        
transform: scale() skew() rotate() translate();
                        
          

看起來並不困難啊～簡單啦～

不過也有可能長成這樣

                        
transform: matrix(0,0,0,0,0,0);
                        
          

6個數字而已～不怕

抱歉！這個才是3D的 matrix

                        
transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0,
                    0, 0, 0, 0, 0, 0, 0, 0)
                        
          

這...@@開始後悔當初數學沒有好好學...

廢話少說～
快點Demo吧

簡單的3D大概是這樣

• 我翻
• 我再翻
• 我翻翻翻
• 我折

加一點程式可以變這樣

• menu1（請縮放視窗到手機尺寸看）
• menu2（請縮放視窗到手機尺寸看）
• menu3（請縮放視窗到手機尺寸看）
• menu4（請縮放視窗到手機尺寸看）
• menu5（請縮放視窗到手機尺寸看）
• menu6

再多加一點東西看看

• Donuts1
• Donuts2
• Donuts4

金變態～謀要緊...溝來...

• 3D-魔術方塊

其實 CSS3 3D
不困難

所以...

現場寫一段？

會不會太超過了點？

CSS 3D怎麼寫？

放感情下去寫
- 取自海角七號

先了解結構

• 建立一個3D空間放置所有物件
• 把透視點放在該3D空間物件
• 一個盒子有六個面
• 所有面在一個容器
• 控制一個物件比控制多個物件簡單

直接示範

謝謝大家

我是Amos

FB: Amos Lee

部落格:ＣＳＳ可樂

今日的範例打包下載

http://csscoke.com/test/download.html