css如何實(shí)現(xiàn)以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)

本文小編為大家詳細(xì)介紹“css如何實(shí)現(xiàn)以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css如何實(shí)現(xiàn)以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)公司專注于新?lián)峋W(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供新?lián)釥I(yíng)銷型網(wǎng)站建設(shè)，新?lián)峋W(wǎng)站制作、新?lián)峋W(wǎng)頁(yè)設(shè)計(jì)、新?lián)峋W(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造新?lián)峋W(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供新?lián)峋W(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

css以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)的方法：1、新建一個(gè)HTML文件；2、通過(guò)img引入圖片；3、給img標(biāo)簽添加css屬性為“@keyframes rotate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}”即可實(shí)現(xiàn)以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)。

css實(shí)現(xiàn)圖片旋轉(zhuǎn)，并設(shè)置旋轉(zhuǎn)點(diǎn)

先做一點(diǎn)技術(shù)上的知識(shí)普及：

實(shí)例

旋轉(zhuǎn) div 元素：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

定義和用法

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

語(yǔ)法

transform: none|transform-functions;
值描述
none定義不進(jìn)行轉(zhuǎn)換。
matrix(n,n,n,n,n,n)定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。
translate(x,y)定義 2D 轉(zhuǎn)換。
translate3d(x,y,z)定義 3D 轉(zhuǎn)換。
translateX(x)定義轉(zhuǎn)換，只是用 X 軸的值。
translateY(y)定義轉(zhuǎn)換，只是用 Y 軸的值。
translateZ(z)定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。
scale(x,y)定義 2D 縮放轉(zhuǎn)換。
scale3d(x,y,z)定義 3D 縮放轉(zhuǎn)換。
scaleX(x)通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。
scaleY(y)通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。
scaleZ(z)通過(guò)設(shè)置 Z 軸的值來(lái)定義 3D 縮放轉(zhuǎn)換。
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)。
skew(x-angle,y-angle)定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。
skewX(angle)定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。
skewY(angle)定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。
perspective(n)為 3D 轉(zhuǎn)換元素定義透視視圖。

然后大家在做的時(shí)候大多遇到的問(wèn)題時(shí)，這個(gè)起始點(diǎn)，也就是旋轉(zhuǎn)點(diǎn)的問(wèn)題。我想讓他這樣轉(zhuǎn)，他為什么就不聽(tīng)話呢？

這就要說(shuō)說(shuō)，transform origin了

實(shí)例

設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置：

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); 		/* IE 9 */
-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}

定義和用法

transform-origin 屬性允許您改變被轉(zhuǎn)換元素的位置。

2D 轉(zhuǎn)換元素能夠改變?cè)?x 和 y 軸。3D 轉(zhuǎn)換元素還能改變其 Z 軸。

為了更好地理解 transform-origin 屬性。

Safari/Chrome 用戶：為了更好地理解 transform-origin 屬性用于 3D 轉(zhuǎn)換的情況。

注釋：該屬性必須與 transform 屬性一同使用。

語(yǔ)法

transform-origin: x-axis y-axis z-axis;
值描述
x-axis

定義視圖被置于 X 軸的何處。可能的值：

  • left

  • center

  • right

  • length

  • %

y-axis

定義視圖被置于 Y 軸的何處?？赡艿闹担?/p>

  • top

  • center

  • bottom

  • length

  • %

z-axis

定義視圖被置于 Z 軸的何處。可能的值：

  • length

最后，給大家呢演示一個(gè)實(shí)例demo：

原始圖片為一個(gè)黑色正方形，我們希望它根據(jù)左上角的頂點(diǎn)進(jìn)行旋轉(zhuǎn)：

圖片：

css如何實(shí)現(xiàn)以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)

源碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				margin-top: 200px;
				margin-left: 500px;
				width: 100px;
				height: 100px;
				display: block;
  				 animation: rotate 6s linear infinite;
  				 transform-origin:0 0;
			}
			@keyframes rotate{
				0%{
					transform: rotate(0deg);
					
				}
				100%{
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		
		<img src="img/圖片.png" />
		
	</body>
</html>

效果展示：

css如何實(shí)現(xiàn)以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)

讀到這里，這篇“css如何實(shí)現(xiàn)以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：css如何實(shí)現(xiàn)以一個(gè)點(diǎn)為定點(diǎn)旋轉(zhuǎn)
鏈接URL：http://muchs.cn/article8/isjjip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、微信公眾號(hào)、ChatGPT、網(wǎng)站策劃、網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)