css3中進(jìn)行2D和3D轉(zhuǎn)化的方法

發(fā)布時(shí)間：2020-08-29 14:39:46 來(lái)源：億速云閱讀：105 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下css3中進(jìn)行2D和3D轉(zhuǎ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）

例：
<style>
	/*在chrome瀏覽器下運(yùn)行*/
div
{
width:200px;
height: 100px;
text-align: center;
line-height:100px;
background-color: pink;
-webkit-transform:translateX(150px);/*X軸移動(dòng)150px*/
-webkit-transform:rotate(-50deg);/*按逆時(shí)針旋轉(zhuǎn)50度*/
-webkit-transform:skew(20deg,20deg);/*沿X軸，Y軸旋轉(zhuǎn)20度*/	
}
</style>

效果圖

css3中進(jìn)行2D和3D轉(zhuǎn)化的方法

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è)效果

例
<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中進(jìn)行2D和3D轉(zhuǎn)化的方法

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

向AI問(wèn)一下細(xì)節(jié)

css3中進(jìn)行2D和3D轉(zhuǎn)化的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽