① 請問滑鼠滑過背景圖片，圖片圍繞圓心旋轉的效果怎麼實現css3也可以..
@-webkit-keyframesbtnRotate{
0%{
-webkit-transform:rotateZ(0deg);
}
100%{
-webkit-transform:rotateZ(360deg);
}
}
#startMenubutton:hoverimg{
-webkit-animation:btnRotate1.5slinearinfinite;
}<imgsrc="xxx">
樓上的代碼，我試了一下，好像只能轉一圈啊
我這個用的css3的動畫效果，滑鼠放上去，他會一直轉，滑鼠移開，就還原
② css網頁中圖片旋轉90度 並適應div
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>CSS3旋轉圖片</title>
<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>
<div class="demo" id="div1">你好。這是一個 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div2">你好。這是一個 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div3">你好。這是一個 div 元素。</div>
原圖<img src="http://www..com/img/bd_logo1.png" alt="Flowers" style="width:200px;">
90°旋轉後的圖片
<img src="http://www..com/img/bd_logo1.png" alt="Flowers" style='width:200px;transform:rotate(90deg)'>
</body>
</html>
代碼呈現的結果如下圖：
(2)css背景圖片旋轉擴展閱讀
CSS圖片旋轉注意事項
1、圖片的旋轉可以說是一種效果，但是逐漸的，旋轉已經不單單是屬於視覺效果那個范疇，其更具有使用性，功能性。我們都知道，照片有時候是需要橫過來的拍的，當我們預覽或共享到web上時需要進行旋轉。
2、這個操作在以往可能更多的是交給軟體去完成，然後再將旋轉到正常角度的圖片發布到web上。但是，現在直接就可以在web上對圖片進行旋轉之類的處理，就算圖片處理軟體再怎麼方便好用，也不及直接發布時對圖片做調整來的方便。這就是圖片旋轉功能的實用意義。我們可以在新浪微博上見到這種圖片旋轉的功能。
③ CSS中設置一張圖片橫著為背景 如何再加一張圖片豎著為背景
做兩層DIV，嵌套如下：
<div 背景設置成你的橫背景，位置是劇中置頂（top center）>
<div 背景是你的橫向背景，使用一張從上到下，從透明到白漸變的png圖片，橫向平鋪 ></div>
</div>
=========
另外，這樣的設計有一定的瀏覽器兼容問題。半透明PNG在IE上支持的不好，所以建議你修改設計，把兩層背景切到同一張圖片上，並且控制前面內容的數量和位置。
還有任何問題歡迎隨時聯系。
④ 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>
⑤ 如何用CSS翻轉背景圖片
1.css3的新增屬性 transform: rotateY(360deg);水平翻轉360°，可以設置當滑鼠移上去的時候進行水平翻轉，或者使用@keyframes規則動畫，一直翻轉。
⑥ 求教：如何用CSS樣式 將背景圖 旋轉
div
{
transform:rotate(9deg);
-ms-transform:rotate(9deg);/*InternetExplorer*/
-moz-transform:rotate(9deg);/*Firefox*/
-webkit-transform:rotate(9deg);/*Safari和Chrome*/
}
這是css3 的2d轉換 確實能實現將背景圖旋轉。（9deg是選擇角度 自己調整）
但是！ 他會把div裡面的所有內容都旋轉掉(如果裡面有文字或者其他也都會被影響而旋轉)！
⑦ css代碼如何把背景圖旋轉
1、首先准備一個HTML文檔，文檔中准備好兩個圖片，接下來會對這兩個圖片進行旋轉。
⑧ CSS，小圖標旋轉
www.web-tinker.com/article/20003.html
你看這篇文章就會明白為什麼不是中心轉動。。
還有，下面這個網站，有一種比較直觀的做法：
www.dasselundwagner.com/en/
⑨ css怎麼調整背景圖片的位置
1、首先打開前端開發工具，新建一個html代碼頁面。
⑩ 在css中設置圖片的背景圖，怎麼設置圖片縱向拉伸
css中設置背景圖拉伸填充，在css2.1之前這個背景的長寬值是不能被修改的。 實際的結果是只能重復顯示，可以使用repeat,repeat-x,repeat-y,no-repeat這些屬性來控制背景圖片的顯示。所以一般用作背景圖片的有2類：
1.是一整張大圖，尺寸和區域大小剛好吻合
2.一個很小的條狀圖，通過repeat後，形成一個很規則的大圖背景。
css3出現以後，可以用background-size 屬性來實現背景圖拉伸填充。 而且這個屬性在firefox，chrome，以及ie9上都可以使用。
具體使用方法如下：
背景圖尺寸（數值表示方式）：
#background-size{ background-size:200px 100px; }
背景圖尺寸（百分比表示方式）：
#background-size{ background-size:30% 60%; }
背景圖尺寸（等比擴展圖片來填滿元素，即cover值）：
#background-size{background-size:cover; }
背景圖尺寸（等比縮小圖片來適應元素的尺寸，即contain值）：
#background-size{ background-size:contain; }
背景圖尺寸（以圖片自身大小來填充元素，即auto值）：
#background-size{ background-size:auto; }