CSS3 3D 轉換

3D Transforms

#CSS3 允許您使用 3D 轉換來對元素進行格式化。

在本章中，您將學到其中的一些3D 轉換方法：

#rotateX()
rotateY( )

點擊下面的元素，來查看2D 轉換與3D 轉換之間的不同之處：

##瀏覽器支持

表格中的數字表示支援該屬性的第一個瀏覽器版本號。

緊接在 -webkit-, -ms- 或 -moz- 前面的數字為支援該前綴屬性的第一個瀏覽器版本號。

rotateX() 方法

rotateX()方法，圍繞其在一個給定度數X軸旋轉的元素。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotateX(120deg);
	-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

rotateY() 方法

rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotateY(130deg);
	-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

轉換屬性

下表列出了所有的轉換屬性：

屬性transformtransform-origintransform-styleperspectiveperspective-originbackface-visibility

3D 轉換方法

##描述	#CSS
向元素套用2D 或3D 轉換。	3
允許你改變被轉換元素的位置。	3
規定被巢狀元素如何在 3D 空間中顯示。	3
規定 3D 元素的透視效果。	3
#規定 3D 元素的底部位置。	3
定義元素在不面對螢幕時是否可見。	3

##matrix3d(定義3D 轉換，並使用16 個值的4x4 矩陣。 translate3d(定義 3D 轉換。 translateX(定義 3D 轉化，僅使用用於 X 軸的值。 translateY(定義 3D 轉化，僅使用用於 Y 軸的值。 translateZ(定義 3D 轉化，僅使用 Z 軸的值。 scale3d(定義 3D 縮放轉換。 scaleX(定義 3D 縮放轉換，透過給定一個 X 軸的值。 scaleY(定義 3D 縮放轉換，透過給定一個 Y 軸的值。 scaleZ(定義 3D 縮放轉換，透過給定一個 Z 軸的值。 rotate3d(定義3D 旋轉。 rotateX(定義沿著 X 軸的 3D 旋轉。 rotateY(定義沿著 Y 軸的 3D 旋轉。 rotateZ(定義沿著 Z 軸的 3D 旋轉。 perspective( 定義 3D 轉換元素的透視視圖。

函數	說明描述
n ,n,n,n,n,n, n,n,n,n,n,n,n, n,n,n)
x,y,z)
x)
y)
z)
x,y,z)
x)
y)
z)
x,y,z,angle)
angle)
angle)
angle)
n)

CSS3 3D 轉換

3D Transforms

3D 轉換方法

PHP中文網