導航:首頁 > 圖片大全 > css如何讓圖片旋轉

css如何讓圖片旋轉

發布時間：2024-12-26 01:40:08

A. css3 如何讓一個圖片不斷翻轉

/*css3讓一個圖片不斷翻轉示例代碼*/
#gavinPlay{
	/*background:colorurlxyrepeat圖片來自網路圖片，按需要更換*/
	background:rerl("https://ss1..com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80")centerno-repeat;
	/*background-size:autoauto||cover代表以寬或高填滿元素背景*/
	background-size:cover;
	/*隨便設置寬高值，測試*/
	width:200px;
	height:200px;
	/*設置默認樣式，開啟3d硬體加速*/
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	/*設置動畫，animation:動畫名稱動畫播放時長單位秒或微秒動畫播放的速度曲線linear為勻速動畫播放次數infinite為循環播放;*/
	-webkit-animation:play3slinearinfinite;
	-moz-animation:play3slinearinfinite;
	animation:play3slinearinfinite;
}
@-webkit-keyframesplay{
	0%{
		/*
		水平翻轉
		*/
		-webkit-transform:rotateY(0deg);
		/*
		垂直翻轉
		-webkit-transform:rotateX(0deg);
		順時針旋轉
		-webkit-transform:rotate(0deg);
		逆時針旋轉
		-webkit-transform:rotate(0deg);
		*/
	}
	100%{
		/*水平翻轉*/
		-webkit-transform:rotateY(360deg);
		/*垂直翻轉
		-webkit-transform:rotateX(360deg);
		順時針旋轉
		-webkit-transform:rotate(360deg);
		逆時針旋轉
		-webkit-transform:rotate(-360deg);
		*/
	}
}
@-moz-keyframesplay{
	0%{
		-moz-transform:rotateY(0deg);
		/*
		-moz-transform:rotateX(0deg);
		-moz-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		*/
	}
	100%{
		-moz-transform:rotateY(360deg);
		/*
		-moz-transform:rotateX(360deg);
		-moz-transform:rotate(360deg);
		-moz-transform:rotate(-360deg);
		*/
	}
}
@keyframesplay{
	0%{
		transform:rotateY(0deg);
		/*
		transform:rotateX(0deg);
		transform:rotate(0deg);
		transform:rotate(0deg);
		*/
	}
	100%{
		transform:rotateY(360deg);
		/*
		transform:rotateX(360deg);
		transform:rotate(360deg);
		transform:rotate(-360deg);
		*/
	}
}

<!--html布局代碼-->
<divid="gavinPlay"></div>

B. css網頁中圖片旋轉90度並適應div

代碼如下：

<!DOCTYPE html>

<html>

<head>

<style>

demo {

width: 100px;

height: 75px;

background-color: yellow;

border: 1px solid black;

margin:20px;

}

#div2 {

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-moz-transform: rotate(30deg); /* Firefox */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

-o-transform: rotate(30deg); /* Opera */

}

#div3 {

transform: rotate(90deg);

ms-transform: rotate(90deg); /* IE 9 */

moz-transform: rotate(90deg); /* Firefox */

webkit-transform: rotate(90deg); /* Safari and Chrome */

o-transform: rotate(90deg); /* Opera */

}

</style>

</head>

<body>

原圖<img src="http://www..com/img/bd_logo1.png" alt="Flowers" style="width:200px;">

90°旋轉後的圖片

</body>

</html>

代碼呈現的結果如下圖：

(2)css如何讓圖片旋轉擴展閱讀

CSS圖片旋轉注意事項

1、圖片的旋轉可以說是一種效果，但是逐漸的，旋轉已經不單單是屬於視覺效果那個范疇，其更具有使用性，功能性。我們都知道，照片有時候是需要橫過來的拍的，當我們預覽或共享到web上時需要進行旋轉。

2、這個操作在以往可能更多的是交給軟體去完成，然後再將旋轉到正常角度的圖片發布到web上。但是，現在直接就可以在web上對圖片進行旋轉之類的處理，就算圖片處理軟體再怎麼方便好用，也不及直接發布時對圖片做調整來的方便。這就是圖片旋轉功能的實用意義。我們可以在新浪微博上見到這種圖片旋轉的功能。

C. css代碼如何把背景圖旋轉

這個要用css3，ie要用濾鏡，舉例順時針旋轉90度
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
上面代碼前三行是css3，第四行是ie濾鏡的簡單的90度的整數倍旋轉方式，更加復雜的度數要用矩陣，需要的話可以查查資料
註：左旋把90改為-90，rotation=1改為rotation=3.
註：如果你的層上還有文字什麼的，也會被旋轉，所以有文字的話，和背景圖放在不同的層上，旋轉有背景圖的層

D. 怎樣用CSS實現圖片翻轉

以實現一張圖片雙面翻轉為例：

方法一：

1、實現CSS樣式的方法代碼如下。

E. css代碼如何把背景圖旋轉

1、首先准備一個HTML文檔，文檔中准備好兩個圖片，接下來會對這兩個圖片進行旋轉。

閱讀全文

與css如何讓圖片旋轉相關的資料

熱點內容

想喝酒的圖片帶文字發布：2025-05-08 00:42:52 瀏覽：67

word怎麼讓圖片列印出來是彩色的發布：2025-05-08 00:14:57 瀏覽：242

女生批圖片大全發布：2025-05-08 00:01:16 瀏覽：572

將圖片表格轉word 發布：2025-05-08 00:01:13 瀏覽：921

剌蝟女孩圖片發布：2025-05-07 23:59:00 瀏覽：549

雪莉新發型圖片發布：2025-05-07 23:52:03 瀏覽：280

卧槽的圖片卡通可愛的發布：2025-05-07 23:37:27 瀏覽：833

可愛霸氣女孩頭像圖片當臉發布：2025-05-07 23:32:28 瀏覽：485

傷心圖片大全可愛動漫發布：2025-05-07 23:28:09 瀏覽：674

方臉適合的發型男生發型圖片大全發布：2025-05-07 23:24:15 瀏覽：786

動漫男生帥氣三格圖片發布：2025-05-07 23:14:09 瀏覽：409

超輕黏土地理模型圖片簡單發布：2025-05-07 22:54:51 瀏覽：1001

我愛你老鼠圖片怎麼畫發布：2025-05-07 22:53:14 瀏覽：997

致父母文字圖片發布：2025-05-07 22:38:56 瀏覽：943

醫生看美女屁股圖片發布：2025-05-07 22:28:01 瀏覽：523

帕薩特圖片價格表發布：2025-05-07 22:26:28 瀏覽：549

趙麗穎萌萌噠圖片大全可愛q版發布：2025-05-07 22:21:26 瀏覽：865

動漫玩偶大全圖片發布：2025-05-07 22:21:15 瀏覽：460

卡通頭像女生高清背影圖片發布：2025-05-07 21:57:29 瀏覽：430

圖片上打字如何調整字大小發布：2025-05-07 21:19:02 瀏覽：59