溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3中進行2D和3D轉化的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
通過 轉換，我們可以對元素進行移動、縮放、轉動、拉長或拉伸，需要注意瀏覽器的兼容問題，在寫程序的時候注意要寫清楚
Chrome 和 Safari 需要前綴 -webkit-，Internet Explorer 9 需要前綴 -ms-
Internet Explorer 10 和 Firefox 支持 3D 轉換但是Opera 仍然不支持 3D 轉換
2D轉換
translate()表示從其當前位置移動到設定的值,設定left值和top值
translate（100px,30px）//從左側移動100px，從上往下移30px
rotate()表示元素順時針旋轉所設定的角度，當為負值時表示元素逆時針旋轉
rotate(30deg)//順時針旋轉30度
scale()表示元素的尺寸會增加或減少設置寬度（X 軸）和高度（Y 軸）
scale(3,4)//把寬度擴大為原來的2倍，把高度變為原來的4倍
skew()表示元素翻轉所設定的角度，設定X 軸和Y 軸
skew(30deg,20deg)//沿X軸把元素翻轉30度，沿Y軸翻轉20度
matrix()
matrix() 方法就是一個總的2D方法包含數學函數，旋轉，縮放，移動以及傾斜
matrix(0.866,0.5,-0.5,0.866,0,0）
例：
<style>
/*在chrome瀏覽器下運行*/
div
{
width:200px;
height: 100px;
text-align: center;
line-height:100px;
background-color: pink;
-webkit-transform:translateX(150px);/*X軸移動150px*/
-webkit-transform:rotate(-50deg);/*按逆時針旋轉50度*/
-webkit-transform:skew(20deg,20deg);/*沿X軸，Y軸旋轉20度*/
}
</style>效果圖
3D轉換
rotateX()表示沿X軸旋轉多少度，rotateY() 表示沿Y軸旋轉
rotateX(30deg)//沿X軸旋轉30度
translate3d(x,y,z)：3D 轉化
translateX(x)適用用于 X 軸的值，translateY(y)適用于Y值，translateZ(z) 適用用于 Z 軸的值
translateX(100px)//向左移動100px
scale3d(x,y,z)：3D 縮放轉換。
scaleX(x) 給定一個 X 軸的值, scaleY(y) 給定一個 Y 軸的值,scaleZ(z) 給定一個 Z 軸的值。
scaleX(1.5)//沿水平方向擴大1.5倍 scaleX(0.5)//沿水平方向縮小0.5倍
rotate3d(x,y,z,angle) ：3D 旋轉。
rotateX(angle)沿 X 軸的 3D 旋轉, rotateY(angle) 沿 Y 軸的 3D 旋轉,rotateZ(angle)沿 Z 軸的 3D 旋轉。
rotateX(30deg)//沿X軸旋轉30度
perspective(n) 定義 3D 轉換元素的透視視圖。
但目前瀏覽器不支持這個效果
例
<style type="text/css">
.demo{
width: 100px;
height: 100px;
}
.box{
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 1s;
}
.box1{
position: absolute;
width:100px;
height:100px;
background-color:pink;
}
.demo:hover .box{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="demo">
<div class="box">
<div class="box1"></div>
</div>
</div>效果圖
以上是css3中進行2D和3D轉化的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
