CSS # 11–3D Transform

Thomas Hung

Published in

Thomas 學習筆記

7 min readJun 16, 2020

上一章節我們介紹 2D Transform 屬性使用的方式，這章節來介紹 3D Transform 屬性的使用方式吧！

先來說說 2D 與 3D 有什麼不同，說簡單一點就是多了 Z軸而以。

要進入主題前先介紹 3D Transform 的屬性 :

transform-origin : 元素的原始位置(參考點)，參數值為 x , y , z
transform-style : 定義 2D 或是 3D Transform 屬性，參數值為 flat(預設值 2D) | preserve-3d
perspective : 設定透視圖視點距離，意思為使用者觀看的位置至元素的距離，預設值為 0
perspective-origin :定義透視圖的基準點，參數值為 x 軸與 y 軸，單位為百分比 %、長度單位、方向關鍵字，預設值為 perspective-origin(50% , 50%)
backface-visibility : 定義是否顯示背面內容，參數值為 visible(顯示) | hidden(隱藏)

3D Transform

使 <html> 中的元素(包含內容)呈現出 3D Transform 的平移、旋轉、縮放，但少了傾斜(skew) 的渲染樣式。

Transform 屬性有以下幾種 :

translate3d(x , y , z) : 平移
rotate3d() : 旋轉
scale3d(x , y , z) : 縮放

translate3d() 屬性說明

說明 : 平移，以下範例中以為元素中心點進行平移
單位為百分比%、座標、方位關鍵字，如只輸入 x 軸時 y 軸與 z 軸會預設為 0 ，也就是只有 x 軸進行平移
它還可以細分出 X軸與 Y軸及 Z軸進行平移如 : translateX() 、translateY()、translateZ()

//**CSS**
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}.moved-1 {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}.moved-2 {
  transform: perspective(500px) translate3d(10px, 0, -100px);
  background-color: pink;
}//**HTML**
<div>Static</div>
<div class="moved-1">Moved</div>
<div>Static</div>
<div class="moved-2">Moved</div>
<div>Static</div>

如Z軸的大小不同會呈現出不同的視角。

rotate3d() 屬性說明

說明 : 旋轉，以下範例以元素中心點進行旋轉
單位為 deg，如 X軸數值為正則是向上旋轉，Y軸數值為正則是向右旋轉，Z軸數值為正則是順時針旋轉
它還可以細分出 X軸與 Y軸及 Z軸進行旋轉如 : rotateX() 、rotateY()、rotateZ()

//**CSS**
body{
  margin:50px;
}div {
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  transform-style:preserve-3d;
  transform:perspective(500px);
  display:inline-block;
  margin:20px;
}.X{
  background-color: skyblue;
  animation: rotationX 5s ease infinite;
}@keyframes rotationX{
  0%{transform:rotateX(0deg)};
  100%{transform:rotateX(360deg)};
}.Y{
  background-color: blueviolet;
  animation:rotationY 5s linear infinite;
}@keyframes rotationY{
  0%{transform:rotateY(0deg)};
  100%{transform:rotateY(360deg)};
}.Z{
  background-color: yellowgreen;
  animation:rotationZ 5s linear infinite;
}@keyframes rotationZ{
  0%{transform:rotateZ(0deg)};
  100%{transform:rotateZ(360deg)};
}//**HTML**
<div class="X">rotationX</div>
<div class="Y">rotationY</div>
<div class="Z">rotationZ</div>

在這裡我們先使用另個屬性 animation 動畫效果，之後再介紹此屬性。

scale3d 屬性說明

說明 : 縮放，以下範例中以元素中心點進行縮放
單位為無，只有數值為倍率
它還可以細分出 X軸與 Y軸及 Z軸進行縮放如 : scaleX() 、scaleY()、scaleZ()

//**CSS**
body{
  margin:50px;
}div {
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  transform-style:preserve-3d;
  transform:perspective(500px);
  display:inline-block;
  margin:30px;
}.X{
  background-color: skyblue;
  animation: scaleX 5s ease infinite;
}@keyframes scaleX{
  0%{transform:scaleX(1)};
  50%{transform:scaleX(2)};
  100%{transform:scaleX(1)};
}.Y{
  background-color: blueviolet;
  animation:scaleY 5s ease infinite;
}@keyframes scaleY{
  0%{transform:scaleY(1)};
  50%{transform:scaleY(2)};
  100%{transform:scaleY(1)};
}//**HTML**
<div class="X">scaleX</div>
<div class="Y">scaleY</div>

…

參考： transform 、 transform-function 、CSS 3D Transforms 、 變形(transform) 3D基本使用

以上是我對 CSS # 11–3D Transform 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~

***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***

CSS # 11–3D Transform

Transform 屬性有以下幾種 :

translate3d() 屬性說明

rotate3d() 屬性說明

scale3d 屬性說明

Written by Thomas Hung