iT邦幫忙

DAY 25
6

CSS沒有極限系列 第 21

CSS沒有極限 - CSS transform-origin 起始點

  • 分享至 

  • xImage
  •  

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-10 (建議使用Chrome瀏覽器)
本篇介紹transform的起始點,一般來說變形的起始點都在物件的中心點,但如果需要像時鐘的分秒針一樣,中心點並不再物件的中心,就需要靠transform-origin去設定物件變形的起始點。


在html裡的基準點都是從左上開始,從水平開始往右稱為x軸,垂直往下稱為y軸,CSS在編寫習慣上也是先寫x軸再寫y軸,如50px 100px,結果會是x軸向右50px,y軸垂直向下100px。而tranaform的屬性中,坐標將是相當重要的關鍵。


本篇介紹transform的起始點,一般來說變形的起始點都在物件的中心點,但如果需要像時鐘的分秒針一樣,中心點並不再物件的中心,就需要靠transform-origin去設定物件變形的起始點。

在html裡的基準點都是從左上開始,從水平開始往右稱為x軸,垂直往下稱為y軸,CSS在編寫習慣上也是先寫x軸再寫y軸,如50px 100px,結果會是x軸向右50px,y軸垂直向下100px。而tranaform的屬性中,坐標將是相當重要的關鍵。

Rotate

.rotate   
  +transform(rotate(30deg)) 

在這一個demo中,只有設定rotate旋轉50度,並沒有設定起始點。因為此時的物件預設值坐標是50% 50%,

 .rotate2
  +transform(rotate(30deg))
  +transform-origin(0,0)

在設定玩起始點後,2D變形物件會依起始點開始作變形,如範例中就是從x-0 y-0,左上角開始跑,所以在設定transform必須要清楚瞭解到要變型物件的起始點。

Scale
Scale是屬於transform2D的縮放變形效果,值為x軸及y軸倍率,而他一樣會受物件起始點的影響。

 .scale
  +transform(scale(1.5, 1.5))
 .scale2
  +transform(scale(1.5, 1.5))
  +transform-origin(0,0)

由上面兩個scale範例中可以瞭解到基準點對於變形的重要性,而這將會影響版面的規劃以及其他物件之相對關係。

Rotate 3D

.rotate3
  @extend .box
  +transform-style(preserve-3d)
  +transform(rotateY(0deg))
  +transform-origin(0,0)
  &:hover
    +transform(rotateY(90deg))
.rotate4
  @extend .box
  +transform-style(preserve-3d)
  +transform(rotateY(0deg))
  +transform-origin(100%,0)
  &:hover
    +transform(rotateY(-90deg))

當然3D也不例外,如果設定好基準點,物件才能依設定的軸心旋轉,如果把軸心放在最左邊及最右邊,就可以向上方這開門的效果。

旋轉吧 時鐘

就如同最開始所說的,如果設定好起始點,畫一個時鐘也不是問題。


上一篇
CSS沒有極限 - CSS transform 軸線的謊言
下一篇
CSS沒有極限 - CSS transform-3D的透視(perspective)
系列文
CSS沒有極限41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言