css3 3d
什麼是3d的場景呢? 2d場景，在螢幕上水平和垂直的交叉線x軸和y軸
3d場景，在垂直於螢幕的方法，相對於3d多出個z軸
z軸：靠近螢幕的方向是正向，遠離螢幕的方向是反向
css3中的3d變換主要包括以下幾種功能函式： 3d位移：css3中的3d位移主要包括translatez()和translate3d()兩個功能函式; 3d旋**css3中的3d旋轉主要包括rotatex()、rotatey()、rotatez()和rotate3d()四個功能函式; 3d縮放：css3中的3d縮放主要包括scalez()和scale3d()兩個功能函式;
景深生活中的3d 區別於2d的地方
近大遠小 景深
程式中實現的方法 perspective 元素距離 視線的距離(物體和眼睛的距離越小，近大遠小的效果越明顯)perspective: 1200px;(在父元素中使用)transform:perspective(1200px) (在子元素中使用)兩個都設定會發生衝突，建議只設定父元素，通常的數值在900-1200之間
如果當你的視線距離物體足夠遠的時候，基本上就不會有近大遠小的感覺
perspective-origin;
觀察3d元素的(位置)角度 perspective-origin：center center (中心)
perspective-origin：left top (左上角)
perspective-origin：100% 100% (右下角)
transform-style屬性
transform-style屬性是3d空間乙個重要屬性，指定巢狀元素如何在3d空間中呈現。他主要有兩個屬性值：flat和preserve-3d其中flat值為預設值，表示所有子元素在2d平面呈現。preserve-3d表示所有子元素在3d空間中呈現。
也就是說，如果對乙個元素設定了transform-style的值為flat，則該元素的所有子元素都將被平展到該元素的2d平面中進行呈現。沿著x軸或y軸方向旋轉該元素將導致位於正或負z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者後面。如果對乙個元素設定了transform-style的值為preserve-3d，它表示不執行平展操作，他的所有子元素位於3d空間中。
3d重要功能函式
1、 3d位移
在css3中3d位移主要包括兩種函式translatez()和translate3d()。translate3d()函式使乙個元素在三維空間移動。
語法：translate3d(tx,ty,tz) tx：代表橫向座標位移向量的長度;
ty：代表縱向座標位移向量的長度;
tz：代表z軸位移向量的長度。此值不能是乙個百分比值，如果取值為百分比值，將會認為無效值。
ranslatez()函式的功能是讓元素在3d空間沿z軸進行位移。語法：translatez(t) t：指的是z軸的向量位移長度。
2、 3d旋轉
在三維變形中，我們可以讓元素在任何軸旋轉。為此，css3新增三個旋轉函式：rotatex()、rotatey()、rotatez()和rotate3d(x,y,z,a)。
rotatex(a)
rotatex()函式指定乙個元素圍繞x軸旋轉，旋轉的量被定義為指定的角度;如果值為正值，元素圍繞x軸順時針旋轉;反之，如果值為負值，元素圍繞x軸逆時針旋轉。
rotatey(a)
rotatey()函式指定乙個元素圍繞y軸旋轉，旋轉的量被定義為指定的角度;如果值為正值，元素圍繞y軸順時針旋轉;反之，如果值為負值，元素圍繞y軸逆時針旋轉。
rotatez(a)
rotatez()函式和其他兩個函式功能一樣的，區別在於rotatez()函式指定乙個元素圍繞z軸旋轉。
rotate3d(x,y,z,a)
x：是乙個0到1之間的數值，主要用來描述元素圍繞x軸旋轉的向量值;
y：是乙個0到1之間的數值，主要用來描述元素圍繞y軸旋轉的向量值;
z：是乙個0到1之間的數值，主要用來描述元素圍繞z軸旋轉的向量值;
a：是乙個角度值，主要用來指定元素在3d空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。
3、 3d縮放
css3 3d變形中的縮放主要有scalez()和scale3d()兩種函式，當scale3d()中x軸和y軸同時為1，即scale3d(1,1,sz)，其效果等同於scalez(sz)。通過使用3d縮放函式，可以讓元素在z軸上按比例縮放。預設值為1，當值大於1時，元素放大，反之小於1大於0.01時，元素縮小
scale3d(sx,sy,sz)
sx：橫向縮放比例;
sy：縱向縮放比例;
sz：z軸縮放比例;
scalez(s)
s：指定元素每個點在z軸的比例。
注：scalez()和scale3d()函式單獨使用時沒有任何效果，需要配合其他的變形函式一起使用才會有效果
HTML5 基礎知識（三）
em元素用於標記強調的文字 cite元素用於標識對藝術作品 電影 圖書等內容的引用 內容顯示的樣子與為其使用的元素沒有關係，不能為了讓文字變為斜體就使用em或cite元素，新增樣式是css的事情。段落 html會忽略文字編輯器中輸入的回車或其他額外的空格。在網頁中開始乙個新的段落，應該使用p元素。格...
html5的基礎知識
是宣告html5文件 不區分大小寫 是頁面的根元素 包含文件的元 meta 資料，例如定義網頁編碼格式為utf 8 描述了文件的標題 包含了可見的頁面內容 為大標題，從大到小可用從h1 h6 為乙個段落 標籤經常是成對出現的，第乙個為開始標籤，第二個為結束標籤 html的檔名字尾可用.html也可以...
HTML5前端基礎知識學習
web前端應用需要瀏覽器作為載體，目前可供選擇的瀏覽器型別非常多，選擇款合適的瀏覽器，對於體驗htmls的效果將會有很大的幫助。另外，選擇得心應手的開發工具，也能夠更好地掌握htmls的開發技巧，提高開發實際效果。對於簡單的html網頁，使用記事本就可以完成頁面布局和顯示，對於稍複雜的一些html網...