導航:首頁 > 圖片大全 > 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如何讓圖片旋轉相關的資料

熱點內容

高劉海齊肩短發發型圖片發布：2024-12-26 12:44:31 瀏覽：602

劉海卷的發型圖片發布：2024-12-26 12:44:23 瀏覽：740

呆頭漫畫圖片大全發布：2024-12-26 12:38:45 瀏覽：550

所有動漫女生裙子圖片發布：2024-12-26 12:36:36 瀏覽：960

白底耐克圖片怎麼做的發布：2024-12-26 12:24:47 瀏覽：489

如何把微信中的圖片放到相冊發布：2024-12-26 11:57:05 瀏覽：390

怎麼用ps把圖片摳出來發布：2024-12-26 11:55:23 瀏覽：600

兒童圖畫可愛圖片大全發布：2024-12-26 11:53:52 瀏覽：40

有雪的女生圖片發布：2024-12-26 11:52:25 瀏覽：647

大象怎麼畫超簡單圖片發布：2024-12-26 11:48:08 瀏覽：869

女生遮肉穿衣搭配圖片發布：2024-12-26 11:44:27 瀏覽：409

怎麼製作圖片壓縮包發布：2024-12-26 11:38:25 瀏覽：980

買衣服誇人圖片發布：2024-12-26 11:35:34 瀏覽：51

外國衣服品牌標志圖片發布：2024-12-26 11:34:07 瀏覽：242

如何編輯微博多張圖片發布：2024-12-26 11:25:53 瀏覽：290

搞笑惡心美女的圖片發布：2024-12-26 11:24:55 瀏覽：18

ps圖片文字如何轉換成矢量圖片發布：2024-12-26 11:16:01 瀏覽：436

女孩抱狗的圖片大全發布：2024-12-26 11:15:51 瀏覽：327

蝴蝶精靈王圖片大全發布：2024-12-26 11:13:24 瀏覽：135

卷發長發型圖片燙發發布：2024-12-26 11:12:11 瀏覽：436