旋轉圖像

我試着旋轉圍繞其中心世界 - 但不能似乎旋轉它的正確方法（繞其自身的軸線）旋轉圖像

它很難解釋，所以我做了一個小提琴可以很好的....搗鼓。

和我的CSS

.world 
{ 
-webkit-animation: spin1 2s infinite linear; 
-moz-animation: spin1 2s infinite linear; 
-o-animation: spin1 2s infinite linear; 
-ms-animation: spin1 2s infinite linear; 
animation: spin1 2s infinite linear; 
} 

@-webkit-keyframes spin1 { 
0% { -webkit-transform: rotate(0deg);} 
100% { -webkit-transform: rotate(360deg);} 
} 
@-moz-keyframes spin1 { 
0% { -moz-transform: rotate(0deg);} 
100% { -moz-transform: rotate(360deg);} 
} 
@-o-keyframes spin1 { 
0% { -o-transform: rotate(0deg);} 
100% { -o-transform: rotate(360deg);} 
} 
@-ms-keyframes spin1 { 
0% { -ms-transform: rotate(0deg);} 
100% { -ms-transform: rotate(360deg);} 
} 
@-keyframes spin1 { 
0% { transform: rotate(0deg);} 
100% { transform: rotate(360deg);} 
}

感謝您的幫助（工作幫助將在最後的實驗記）

來源

2014-04-07 anthonytherockjohnson

您是否必須使用以下代碼將原點設置爲圖像中心：'transform-origin' – Cyclonecode

感謝您的答覆，但經過一點小小的調整 - 我所要做的就是將圖像類指定爲.world和一切運行良好 - 澄清 - 我正在旋轉div而不是圖像，div的起源我認爲是右下角。 – anthonytherockjohnson

不，divs默認原點位於左上角。 – Cyclonecode

您不限制div的大小。

其實你並不需要在div可言，你可以將類的圖像：

JSfiddle Demo

<img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/>

來源

2014-04-07 09:24:20

多數民衆贊成 - 我想出了你的答案 - 謝謝你反正。 Paulie_D會信任 – anthonytherockjohnson

你需要設置元素的大小，並指定transform-origin property

-webkit-transform-origin: 50% 50%; 
-moz-transform-origin: 50% 50%; 
-o-transform-origin: 50% 50%; 
transform-origin: 50% 50%; 
width: 256px; 
height: 256px;

E xample小提琴：http://jsfiddle.net/RbXRM/3/

來源

2014-04-07 09:22:40 fcalderan

事實上，'transform-origin'默認居中http://jsfiddle.net/RbXRM/2/ –

@KingKing不錯，我以爲默認值是'0,0,0'。它是每個瀏覽器的默認值嗎？ – fcalderan

我不知道，但它應該是這樣，因爲這是用CSS3規範寫的東西http://www.w3schools.com/cssref/css3_pr_transform-origin.asp :) –

需要旋轉只有IMG

.world img 
{ 
-webkit-animation: spin1 2s infinite linear; 
-moz-animation: spin1 2s infinite linear; 
-o-animation: spin1 2s infinite linear; 
-ms-animation: spin1 2s infinite linear; 
animation: spin1 2s infinite linear; 
}

或修改顯示div.world所以它it shrinks在圖像上（inline-block,inline-table,table）或甚至float它

來源

2014-04-07 09:30:10

回答

相關問題