首頁 > web前端 > css教學 > CSS3教學-3D 轉換

CSS3教學-3D 轉換

黄舟
發布: 2016-12-27 15:59:52
原創
1645 人瀏覽過

Hello!前一篇文章跟大家介紹了CSS3教學-2D 轉換,不知道大家學的怎麼樣呢?接下來跟大家介紹CSS3教學-3D 轉換。

3D 轉換:

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

在本文中,您將學到兩種 3D 轉換方法:

rotateX();

rotateY()。

它如何運作?

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

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

瀏覽器支援:

CSS3教學-3D 轉換

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

Chrome 和 Safari 需要前綴 -webkit-。

Opera 仍然不支援 3D 轉換(它只支援 2D 轉換)。

rotateX() 方法:

CSS3教學-3D 轉換

透過 rotateX() 方法,元素圍繞其 X 軸以給定的度數旋轉。

實例:

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
登入後複製

rotateY() 方法:

CSS3教學-3D 轉換

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

實例:

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
登入後複製

轉換屬性:

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

CSS3教學-3D 轉換

3D 轉換方法:

CSS3教學-3D 轉換

3D 轉換方法:


3D 轉換方法:🎜🎜內容請關注PHP中文網(www.php.cn)! 🎜🎜🎜🎜🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板