• 導航

    淺談css 3d與空間坐標軸在武漢網站制作中的應用

    發布時間:2020-01-05 18:31:33 來源:「九州科技」值得信賴的互聯網服務商
    CSS 3D 將越來越多應用于武漢網站制作之中,今天來給大伙好好說說,這css 3d應該如何使用,以及相關的空間坐標軸的知識。感興趣的朋友來了解一下,希望對你有所幫助。

     

      先上效果圖:

      基本思路:三層結構:視角容器>>載體>>具體3d圖像。

      視角容器決定3d的呈現效果,這里的pespective屬性接收參數為像素,perspective的值越大,代表“眼睛離觀察物越遠”,值越小,代表“眼睛越靠近觀察物

      缺少perspective屬性,將無法調整觀測的視角。

     

      載體支持承載3d圖像

      這個載體跟普通的html標簽最大的區別在于它多了一個屬性:transform-style:preserve-3d。表示它支持3d圖像顯示。

      如果缺少了這個屬性,進行過3d轉換的3d圖形們將被壓在一個2d平面內,無法呈現出3d效果,因為容器都是扁的,即使內容是3d的也于事無補。

      具體3d圖像從2d到3d的轉換

      這里的3d圖像都是由2d平面圖像轉換而來,那么如何轉換呢。需要用到translateX,translateY,translateZ屬性,當然簡寫也就是translate-3d,還有rotateX,rotateY,rotateZ等到。而translate(平移),rotate(旋轉)的具體規則,都是基于下方這幅著名的參考圖:三維坐標圖進行的。

      首先說translate的規則,這個自然不必多說,對照著看就可以了,比如說translateZ(-100px)在這幅圖中就相當等于圖像往-z軸的方向移了100px,形象一點的說法就是“向屏幕內部凹陷了100px”。translateX,translateY以此類推。

      難點在rotate,告訴大家一個很簡單的判斷法則:正向軸對著眼睛,順時針則旋轉角度為正,逆時針則旋轉角度為負。

      或者用左手法則也行:伸出左手,大拇指指向正軸方向,四個手指的指向即是旋轉正向,但務必記住是左手!

      左手哥鎮場:

      

      就是這么簡單,比如現在我們要制作一個3d骰子,首先六個平面圖都如上圖所示擺在三維坐標系的中心店,他們的大小都跟載體一樣,要變成一個骰子,需要做如下變換:

      (注:載體和6個面的長寬均為200px)

      

      對照著3d圖,大家比劃比劃就知道怎么回事了。

    最新資訊
    相關推薦
    服務項目
    微信客服
    180-7107-7883
    地址:湖北省武漢市解放大道航天雙城6棟25層
    E-mail:125435440@QQ.com
    備案號:鄂ICP備13002765號-6    鄂公網安備 42010202000700號    網站地圖
    九州科技,您身邊的互聯網應用方案提供商-高端網站建設-網站制作-網站開發-網頁設計-微信開發-小程序開發
    高端網站建設 公眾號開發 小程序制作 網站seo優化 H5活動營銷 互聯網產品

    18071077883

    提交需求
    伊人久久精品影院,av无码一区二区不卡,91在线成人快播电影,swag在线69视频,国产欧美日韩影音先锋在线视频,主播炸柠檬自慰国产在线播放,少女萝莉视频网站,国产网红在视频视频 国产奶牛在线视频| 无内衣曰本美少女萝莉| 极速蜗牛电影中文字幕| 国产广州在线视频| 炼金术士的信中文字幕| gratis rideos欧美tv| 91制片厂 app| 来电狂响中文字幕| 坐伦敦地铁中文字幕| 国产精品富二代APP下载| 国产综合素人在线视频精品| 看中文字幕伦理片| 富富二代国产免费观看 百度| 手机在线视频国产第一页| 午夜裸身直播在线观看| 首之国产 医生护士女的极美| 国产 萝莉 百度 bt| 韩国人脚臭| 麻豆传媒女纹身师艾秋快递| 国产强悍的熟女sm| 麻豆传媒 刘思慧交不起房租 只能| 欧美超白金| 日本动漫 污| 指原莉乃中文字幕| av老司机福利视频在线播放| 丝瓜在线播放观看视频| 国产sm重口54部合集| 仓结持爱 中文字幕| 欧亚系列中文字幕| 国产剧情吐槽| 日本大学艺术| 91在线超在线观看免费| 老女同性恋作爱视频| 中文字幕美国演讲视频| mm131午夜在线观看蜜芽| 日本哥斯达| 日本里番库色列本子大全| 欧美电影在线观看地址| 日本医疗剧| 91新人wushirenfei全集| 欧美大香蕉2017| http://www.jwchandlerblog.com http://www.lehuoren.com http://www.sandranevoux.com http://www.hum6.com http://www.fuguicheng.com http://www.chair-house.com