CSS3與濾境(10)-物件旋轉

屬性名稱

FlipH(水平翻轉,IE濾境)、FlipV(垂直翻轉,IE濾境)

transform(旋轉)、transform-origin(位置)、transform-style(保存3D)、backface-visibility(隱藏背景)

perspective(3D視角)、perspective-origin(3D位置)

backface-visibility

說明:隱藏旋轉DIV元素的背面。一個物件預設的背面是正面反過來看的樣子,使用此屬性可使背面變空白,可參考W3Schools的DEMO。目前僅Safari有支援。此語法不提供範例結果。

屬性值:visible(顯示)、hidden(隱藏)

【範例】

.box {
    backface-visibility:hidden;     /* 不支援IE、Firefox、Chrome與Opera瀏覽器 */
    -webkit-backface-visibility:hidden; /* Safari 使用的語法 */
}

FlipH、FlipV

說明:IE濾境,使圖片產生水平翻轉(FlipH)或垂直翻轉(FlipV)的效果。範例結果請參考這裡

【範例】

.img {
    filter: FlipH;
}

perspective

說明:當放置的物件為3D物件時,此屬性可指定3D物件的視角,可參考W3Schools的DEMO。目前僅Safari有支援。此語法不提供範例結果。

屬性值:none(不設定=0)、(數值)

【範例】

.box {
    perspective: 500;       /* 不支援IE、Firefox、Chrome與Opera瀏覽器 */
    -webkit-perspective: 500;   /* Safari 使用的語法 */
}

perspective-origin

說明:修改3D物件的初始位置,受影響的是子元素,而非元素本身,可參考W3Schools的DEMO。必需與perspective屬性一起使用。目前僅Safari有支援。此語法不提供範例結果。

屬性值:(x軸:left,center,right,長度,百分比) (y軸:top,center,bottom,長度,百分比)

【範例】

.box {
    perspective:150;            /* 不支援IE、Firefox、Chrome與Opera瀏覽器 */
    perspective-origin: 10% 10%;        /* 不支援IE、Firefox、Chrome與Opera瀏覽器 */

    -webkit-perspective:150;        /* Safari 使用的語法 */
    -webkit-perspective-origin: 10% 10%;    /* Safari 使用的語法 */
}

transform

說明:把物件進行2D或3D旋轉。目前僅Chrome與Safari有支援3D旋轉。

屬性值:

  • none:無,沒有任何旋轉。
  • matrix(n,n,n,n,n,n):使用6個數值的矩陣定義2D旋轉。所有2D旋轉都可以透過這個方法來完成。6個數值分別表示:水平縮放、水平傾斜、垂直傾斜、垂直縮放、x位移、y位移。
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n):使用4x4=16個數值的矩陣定義3D旋轉。
  • translate(x-px,y-px):2D位移,x表示與左邊界的距離,y表示與上邊界的距離。
  • translate3d(x-px,y-px,z-px):3D位移,x表示與左邊界的距離,y表示與上邊界的距離,z表示與螢幕垂直的距離,無法顯示效果。
  • translateX(x-px):與左邊界的位移。
  • translateY(y-px):與上邊界的位移。
  • translateZ(z-px):屬於3D位移,與螢幕垂直的位移,無法顯示效果。
  • scale(x,y):2D縮放,x表示水平縮放,y表示垂直縮放。
  • scale3d(x,y,z):3D縮放,x表示水平縮放,y表示垂直縮放,z目前無法顯示效果。
  • scaleX(x):水平縮放。
  • scaleY(y):垂直縮放。
  • scaleZ(z):屬於3D縮放,目前無法顯示效果。
  • rotate(deg):2D旋轉,物體會以中心點為圓心進行旋轉。
  • rotate3d(x,y,z,deg):3D旋轉,xyz為三軸的比重,當兩者為0時視為單軸旋轉。
  • rotateX(deg):3D旋轉,以通過中心點的x軸為中心進行旋轉。
  • rotateY(deg):3D旋轉,以通過中心點的y軸為中心進行旋轉。
  • rotateZ(deg):3D旋轉,以通過中心點的z軸為中心進行旋轉。
  • skew(x-deg,y-deg):2D傾斜,x為水平傾斜,y為垂直傾斜。當數值為(-n,n)時,旋轉角度與rotate(n)相同。
  • skewX(deg):2D水平傾斜。
  • skewY(deg):2D垂直傾斜。
  • perspective(n):定義3D旋轉物件的透視圖。

【範例】

.img1 {
    transform: rotate(30deg);       /* 不支援IE8以前瀏覽器 */
    -ms-transform: rotate(30deg);       /* IE9 使用的語法 */
    -webkit-transform: rotate(30deg);   /* Chrome、Safari 使用的語法 */
    -moz-transform: rotate(30deg);      /* Firefox 使用的語法 */
    -o-transform: rotate(30deg);        /* Opera 使用的語法 */
}
.img2 {
    transform: scale(1,2);          /* 不支援IE8以前瀏覽器 */
    -ms-transform: scale(1,2);      /* IE9 使用的語法 */
    -webkit-transform: scale(1,2);      /* Chrome、Safari 使用的語法 */
    -moz-transform: scale(1,2);     /* Firefox 使用的語法 */
    -o-transform: scale(1,2);       /* Opera 使用的語法 */
}
.img3 {
    transform: skew(30deg,20deg);       /* 不支援IE8以前瀏覽器 */
    -ms-transform: skew(30deg,20deg);   /* IE9 使用的語法 */
    -webkit-transform: skew(30deg,20deg);   /* Chrome、Safari 使用的語法 */
    -moz-transform: skew(30deg,20deg);  /* Firefox 使用的語法 */
    -o-transform: skew(30deg,20deg);    /* Opera 使用的語法 */
}

【結果】

transform-origin

說明:修改transform物件的初始位置,必需與transform屬性一起使用。2D旋轉時只有x、y軸,3D旋轉時增加z軸。目前僅Chrome與Safari有支援3D旋轉。

屬性值:(x軸:left,center,right,長度,百分比) (y軸:top,center,bottom,長度,百分比) (z軸:長度)

【範例】

.img {
    transform: rotate(45deg);       /* 不支援IE8以前瀏覽器 */
    transform-origin:20% 50%;       /* 不支援IE8以前瀏覽器 */

    -ms-transform: rotate(45deg);       /* IE9 使用的語法 */
    -ms-transform-origin:20% 50%;       /* IE9 使用的語法 */

    -webkit-transform: rotate(45deg);   /* Chrome、Safari 使用的語法 */
    -webkit-transform-origin:20% 50%;   /* Chrome、Safari 使用的語法 */

    -moz-transform: rotate(45deg);      /* Firefox 使用的語法 */
    -moz-transform-origin:20% 50%;      /* Firefox 使用的語法 */

    -o-transform: rotate(45deg);        /* Opera 使用的語法 */
    -o-transform-origin:20% 50%;        /* Opera 使用的語法 */
}

【結果】

transform-style

說明:讓旋轉的子元素與母元素保持3D位置,可參考W3Schools的DEMO。必需與transform屬性一起使用。目前僅Safari有支援。此語法不提供範例結果。

屬性值:flat(不保持)、preserve-3d(保持)

【範例】

.box {
    transform: rotateY(60deg);      /* 不支援IE8以前瀏覽器 */
    transform-style: preserve-3d;       /* 不支援IE、Firefox、Chrome與Opera瀏覽器 */
    -webkit-transform: rotateY(60deg);  /* Safari 使用的語法 */
    -webkit-transform-style: preserve-3d;   /* Safari 使用的語法 */
}