- 1、本文档共11页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 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
您可能关注的文档
- 铁道通信与信息化技术专业教学资源库 标准化作业指导 18.移动通信终端设备(20141021).doc
- 铁路客运组织 客服工作组织 案例5—站车重点旅客服务.doc
- 铁路旅客运输服务 情境1.1:铁路客运服务礼仪基础知识应用 编绳子法.doc
- 铁路线路监测与养护 任务四 曲线缩短轨配置 教案:曲线缩短轨配置.doc
- 铁路运输设备使用与管理 任务四:中间站、区段站及编组站的主要作业及设备 《西安地铁乘坐指南》(图文版.doc
- 通风与空调系统施工 通风与空调系统施工 质量和安全并重绿色与节能跟进.docx
- 通信技术产品与应用 HFC接入案例 HFC接入案例教案.doc
- 铜雕技艺 朱炳仁大师作品介绍 禅品--古雅之艺 修养身心.docx
- 图像处理与动画制作-2017 智能对象图层 教学设计(智能对象图层).doc
- 图形创意 比喻、象征、比拟、借贷、夸张、对比、移用、直叙等 企业案例分析(直叙)我是捕饼王.doc
- 2024年山东德州夏津县融媒体中心招聘4人历年高频考题难、易错点模拟试题(共500题)附带答案详解.docx
- 2024年山东济南历城区卫生健康局所属事业单位招聘50人历年高频考题难、易错点模拟试题(共500题)附带答案详解.docx
- 2024江苏徐州锡沂高新技术产业开发区招聘50人历年高频难、易点(行政职业能力测验共200题含答案解.docx
- 2024年山东德州职业技术学院招聘49人历年高频考题难、易错点模拟试题(共500题)附带答案详解.docx
- 2024年山东德州高级师范学校招聘工作人员12人高频考题难、易错点模拟试题(共500题)附带答案详解.docx
- 2023年12月恩施巴东县“才聚荆楚·智汇恩施”第二次专项事业单位工作人员7名笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2023年12月广东广州市黄埔区机关事务管理局招考聘用政府雇员笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2023年12月广西马山县纪委监委机关面向社会公开招考基层廉洁监督员及防贫监测员笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2023年12月广东广州市增城区招考聘用教师(上海设点)92人笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2023年12月广东省茂名市电白区赴高校现场公开招聘62名教师314笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
文档评论(0)