小編給大家分享一下css3中進(jìn)行2D和3D轉(zhuǎn)化的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)的成都網(wǎng)站建設(shè)公司，我們專(zhuān)注成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)、企業(yè)網(wǎng)站建設(shè)，友情鏈接，1元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

通過(guò) 轉(zhuǎn)換，我們可以對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸，需要注意瀏覽器的兼容問(wèn)題，在寫(xiě)程序的時(shí)候注意要寫(xiě)清楚

Chrome 和 Safari 需要前綴 -webkit-，Internet Explorer 9 需要前綴 -ms-

Internet Explorer 10 和 Firefox 支持 3D 轉(zhuǎn)換但是Opera 仍然不支持 3D 轉(zhuǎn)換

2D轉(zhuǎn)換

translate()表示從其當(dāng)前位置移動(dòng)到設(shè)定的值,設(shè)定left值和top值

translate（100px,30px）//從左側(cè)移動(dòng)100px，從上往下移30px

rotate()表示元素順時(shí)針旋轉(zhuǎn)所設(shè)定的角度，當(dāng)為負(fù)值時(shí)表示元素逆時(shí)針旋轉(zhuǎn)

rotate(30deg)//順時(shí)針旋轉(zhuǎn)30度

scale()表示元素的尺寸會(huì)增加或減少設(shè)置寬度（X 軸）和高度（Y 軸）

scale(3,4)//把寬度擴(kuò)大為原來(lái)的2倍，把高度變?yōu)樵瓉?lái)的4倍

skew()表示元素翻轉(zhuǎn)所設(shè)定的角度，設(shè)定X 軸和Y 軸

 skew(30deg,20deg)//沿X軸把元素翻轉(zhuǎn)30度，沿Y軸翻轉(zhuǎn)20度

matrix()

matrix() 方法就是一個(gè)總的2D方法包含數(shù)學(xué)函數(shù)，旋轉(zhuǎn)，縮放，移動(dòng)以及傾斜

matrix(0.866,0.5,-0.5,0.866,0,0）

例：

效果圖

3D轉(zhuǎn)換

rotateX()表示沿X軸旋轉(zhuǎn)多少度，rotateY() 表示沿Y軸旋轉(zhuǎn)

rotateX(30deg)//沿X軸旋轉(zhuǎn)30度

translate3d(x,y,z)：3D 轉(zhuǎn)化

translateX(x)適用用于 X 軸的值，translateY(y)適用于Y值，translateZ(z) 適用用于 Z 軸的值

translateX(100px)//向左移動(dòng)100px

scale3d(x,y,z)：3D 縮放轉(zhuǎn)換。

scaleX(x) 給定一個(gè) X 軸的值, scaleY(y) 給定一個(gè) Y 軸的值,scaleZ(z) 給定一個(gè) Z 軸的值。

scaleX(1.5)//沿水平方向擴(kuò)大1.5倍
scaleX(0.5)//沿水平方向縮小0.5倍

rotate3d(x,y,z,angle) ：3D 旋轉(zhuǎn)。

rotateX(angle)沿 X 軸的 3D 旋轉(zhuǎn), rotateY(angle) 沿 Y 軸的 3D 旋轉(zhuǎn),rotateZ(angle)沿 Z 軸的 3D 旋轉(zhuǎn)。

rotateX(30deg)//沿X軸旋轉(zhuǎn)30度

perspective(n) 定義 3D 轉(zhuǎn)換元素的透視視圖。

但目前瀏覽器不支持這個(gè)效果

例



	

	

		

	

效果圖

以上是css3中進(jìn)行2D和3D轉(zhuǎn)化的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！