Maison >interface Web >tutoriel HTML >Css 3d_html/css_WEB-ITnose
一開始接觸 CSS3 時,常常會不了解每個 CSS 屬性的意思,就需要花些時間去查詢及嘗試,就算到了現在,對於不熟悉的語法,我還是經常回我的 Blog 查詢,如先前的 動手玩 CSS,快速學會Flex ,我就經常會回去查 Flex 的使用方法 Orz…,這次趁寒流來襲,不想出門的時間在家裡做簡單的 CSS 3d 範例。
當要做 CSS 3D 的效果時,可以先假想兩層的元素。外層是視角,是用第三人稱的方向在看著內層;內層就是物件的本身,可以有不同的 3D 屬性(旋轉、位移等等)。
HTML 結構如下:
<div class="perspective"> <!-- 外層視角 --> <div class="box"> <!-- 物件本身 --> <div></div>
在CSS 的屬性上,外層會提供 perspective 的透視屬性,這是從第三人稱看物件的距離,值可以先使用 500px ~ 1000px (不負責研究,通常這個起手式效果不太差);在內層的屬性則必須包含 transform-style: preserve-3d ,讓物件本身已 3D 的模式呈現,並加入 transform 的變形屬性,就可以完成基本的 CSS 3D 。
CSS 結構如下:
.perspective { perspective: 500px;}.box { transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
接下來透過動手玩的方式,調整看看外層與內層得屬性值,了解他們彼此 perspective 與 transform 之間的效果。
可以發現,如果 perspective 值如果是非常小時,內層物件就會像衝出螢幕一樣,如同我們在看物體時,通常會保持一定的距離,並非貼的很近在觀看。
到底是怎樣的溫度會不想出門呢…,在高雄很少低於 10 度,如果低於 8 度就要拿出羽絨衣,在更低一點就只想要躲在棉被裡…。
這個體感問度是…,讓我回想到馬祖的冬天。