网页布局与设计 例子:单页面页面重构-CSS3部分 玩轉 CSS 3D-1.docx

网页布局与设计 例子:单页面页面重构-CSS3部分 玩轉 CSS 3D-1.docx

  1. 1、本文档共11页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
玩轉 CSS 3D - 原理篇 雖然 CSS 3D 並非真的 3D,CSS 3D 坦白說就是純粹利用計算的方法,藉由瀏覽器的高效能,在 2D 的空間繪製一個 3D 的圖形,就像我們拿張紙,用鉛筆在上頭畫個正立方體之類的,也因為是藉用了瀏覽器來運算,自然而然非常地耗效能,往往只要有過多的形狀轉換為 3D 呈現,就會發現電腦的風扇開始狂轉,這也是使用 CSS 3D 必須要注意的地方,畢竟 CSS 原本就不是拿來做 3D 應用的技術,可以畫 3D,只是可以加強 CSS 呈現的美感和能力,但用在精細的 3D 動畫或轉場效果,還是交給專業的 3D 繪圖軟體來進行。 3D 起手式 我們這邊先來用 Google SketchUp 這個免費的 3D 建模軟體,看一下最普通的 3D 繪圖的介面,從裏頭最基本的會有三個元素,第一個:攝影鏡頭,第二個:立體空間,第三個:立體物件。 攝影鏡頭主要定義了觀看者的角度,就如同我們在拍照,使用長焦距的望遠鏡頭,物體可以拉近且比較不會變形,使用短焦距的廣角鏡,拍攝的物體就容易變形,從下圖可以看出,鏡頭的焦距可以讓空間內的物體產生不同的變形,至於立體空間則是具備了 X、Y、Z 三個座標軸的空間,立體物件則是在這個空間裏頭的物件。 所以繪製 CSS 的 3D 圖形,最重要的也就是要架設這三個物件,不過因為在 CSS 裡並沒有攝影鏡頭、立體空間...等這些 3D 軟體才有的元素,所以變成都是用 div 取代,在對應的 div 上頭加入對應的 style 屬性,就可以進行模擬,藉由上面所提到的三個元素,我們這裡就必須要用到三層 div,最外層是攝影鏡頭,第二層為立體空間,第三層則是立體空間內的立體元素,寫出來的 HTML 長得就像下面這樣: <div class="camera"> <div class="space"> <div class="box"></div> </div> </div> 設定 camera 接著就要來把最外層的 div ( 以下通稱 camera ) 設定為攝影鏡頭,設定的方法為添加 perspective-origin 以及 perspective 這兩個屬性,這個屬性是什麼呢?簡單來說就是透視點以及鏡頭到透視點的距離,如果直接查詢 perspective,看到的八九不離十是下面這些圖案:( 圖片來源: /Perspective.html?) 然而在 W3C 裏頭對於 perspective 的解釋則是下圖這樣,透視點同樣也是物體到攝影機的距離 ( d ) ,但又因為 CSS 的 3D 空間裏頭具有 Z 軸,所以 perspective 的距離會因為 Z 軸的關係而有所縮放 ( 不過千萬要注意,這裡的 Z 指的是物體的 Z 軸,也就是 translateZ,不是攝影機的 )。 回到 CSS 來看的話,我們可以像下面這樣設定,這時候會完全沒有畫面是正常的,因為還沒有設定空間和物體。 .camera{ width:200px; height:200px; perspective-origin:center center; -moz-perspective-origin:center center; -webkit-perspective-origin:center center; perspective:500px; -moz-perspective:500px; -webkit-perspective:500px; } 設定 space 攝影機完成後,就是要設定一個立體空間 space,這個空間設定的方式很簡單,只要設定一個屬性:transform-style,這個屬性預設為 flat,也就是只要是這個 div 內的子元素,一律都是以扁平 ( flat ) 的方式呈現,所屬的變換 transform 也一律都是用 flat 的方式變換,換句話說就是沒有 Z 軸的存在,為了讓內容元素都是立體元素,所以我們要將 transform-style 設為 3D,如此一來內容元素就全部都可以用 3D 進行變換,為了方便區隔,下面我將 space 外圍多一個 boder 做識別。( 範例: css-3d-demo01.html?) .space{ width:100%; height:100%; border:1px dashed #000; transform-style:3d; -moz-transform-style:3d; -webkit-transform-st

您可能关注的文档

文档评论(0)

WanDocx + 关注
实名认证
内容提供者

大部分文档都有全套资料,如需打包优惠下载,请留言联系。 所有资料均来源于互联网公开下载资源,如有侵权,请联系管理员及时删除。

1亿VIP精品文档

相关文档