- 摩刻部落 - https://www.moke.tw/wordpress -

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

屬性名稱

FlipH [1](水平翻轉,IE濾境)、FlipV [1](垂直翻轉,IE濾境)
transform [2](旋轉)、transform-origin [3](位置)、transform-style [4](保存3D)、backface-visibility [5](隱藏背景)
perspective [6](3D視角)、perspective-origin [7](3D位置)

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

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

【範例】

.box {
	backface-visibility:hidden;		/* 不支援IE、Firefox、Chrome與Opera瀏覽器 */
	-webkit-backface-visibility:hidden;	/* Safari 使用的語法 */
}
回到【屬性名稱】 [9]

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

【範例】

.img {
	filter: FlipH;
}
回到【屬性名稱】 [9]

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

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

【範例】

.box {
	perspective: 500;		/* 不支援IE、Firefox、Chrome與Opera瀏覽器 */
	-webkit-perspective: 500;	/* Safari 使用的語法 */
}
回到【屬性名稱】 [9]

perspective-origin
說明:修改3D物件的初始位置,受影響的是子元素,而非元素本身,可參考W3Schools的DEMO [12]。必需與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 使用的語法 */
}
回到【屬性名稱】 [9]

transform
說明:把物件進行2D或3D旋轉。目前僅Chrome與Safari有支援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 使用的語法 */
}

【結果】

回到【屬性名稱】 [9]

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 使用的語法 */
}

【結果】

回到【屬性名稱】 [9]

transform-style
說明:讓旋轉的子元素與母元素保持3D位置,可參考W3Schools的DEMO [13]。必需與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 使用的語法 */
}
回到【屬性名稱】 [9]