Design Code 設計密碼

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

• rotateX()
• rotateY()

它如何工作？

轉換是使元素改變形狀、尺寸和位置的一種效果。

您可以使用2D 或3D 轉換來轉換您的元素。

瀏覽器支持

Internet Explorer 10 和Firefox 支持3D 轉換。

Chrome 和Safari 需要前綴-webkit-。

Opera仍然不支持3D轉換（它只支持2D轉換）。

rotateX() 方法

通過rotateX() 方法，元素圍繞其X 軸以給定的度數進行旋轉。

實例

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);     <span class="code_comment">/* Safari和Chrome */</span> 
-moz-transform: rotateX(120deg);     <span class="code_comment">/* Firefox */</span>
}
	

rotateY() 旋轉

通過rotateY() 方法，元素圍繞其Y 軸以給定的度數進行旋轉。

實例

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);     <span class="code_comment">/* Safari和Chrome */</span> 
-moz-transform: rotateY(130deg);     <span class="code_comment">/* Firefox */</span>
}
	

轉換屬性

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