Maison >interface Web >tutoriel HTML >Css 3d_html/css_WEB-ITnose

Css 3d_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:28:331322parcourir

一開始接觸 CSS3 時,常常會不了解每個 CSS 屬性的意思,就需要花些時間去查詢及嘗試,就算到了現在,對於不熟悉的語法,我還是經常回我的 Blog 查詢,如先前的 動手玩 CSS,快速學會Flex ,我就經常會回去查 Flex 的使用方法 Orz…,這次趁寒流來襲,不想出門的時間在家裡做簡單的 CSS 3d 範例。

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 值如果是非常小時,內層物件就會像衝出螢幕一樣,如同我們在看物體時,通常會保持一定的距離,並非貼的很近在觀看。

2016年的冬天…

到底是怎樣的溫度會不想出門呢…,在高雄很少低於 10 度,如果低於 8 度就要拿出羽絨衣,在更低一點就只想要躲在棉被裡…。

這個體感問度是…,讓我回想到馬祖的冬天。

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn