css中的圖片翻轉(zhuǎn)屬性是哪一個(gè)

發(fā)布時(shí)間：2021-03-03 15:20:17 來(lái)源：億速云閱讀：167 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下css中的圖片翻轉(zhuǎn)屬性是哪一個(gè)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css中的圖片翻轉(zhuǎn)屬性是transform。transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換，我們可以利用該屬性對(duì)元素進(jìn)行旋轉(zhuǎn)、移動(dòng)、傾斜等操作，如【transform:rotate(7deg);】。

css3為我們提供了一個(gè)新屬性transform，利用該屬性我們可以對(duì)元素進(jìn)行移動(dòng)、旋轉(zhuǎn)、傾斜等操作。

屬性介紹：

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。

語(yǔ)法：

transform: none|transform-functions;

常用屬性值：

rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
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)。

（學(xué)習(xí)視頻分享：css視頻教程）

具體代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style> 
div
{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(7deg);
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello</div>

</body>
</html>

運(yùn)行結(jié)果：

css中的圖片翻轉(zhuǎn)屬性是哪一個(gè)

以上是“css中的圖片翻轉(zhuǎn)屬性是哪一個(gè)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

css中的圖片翻轉(zhuǎn)屬性是哪一個(gè)

猜你喜歡

最新資訊

相關(guān)推薦

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