動手玩 CSS 3d

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

CSS 3D

當要做 CSS 3D 的效果時，可以先假想兩層的元素。外層是視角，是用第三人稱的方向在看著內層；內層就是物件的本身，可以有不同的 3D 屬性(旋轉、位移等等)。

HTML 結構如下：

 class="perspective"> 
   class="box"> 
  

在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 度就要拿出羽絨衣，在更低一點就只想要躲在棉被裡…。

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