web-dev-qa-db-ja.com

中央のcss3を中心に画像を回転

私は世界をその中心の周りに回転させようとしていますが、正しい方法で回転させることはできません（独自の中心軸の周りに）

説明が難しいので、デモを作成しました。

.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);
  }
}
<div class="world"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" /></div>

ヘルプをお寄せいただきありがとうございます（作業のヘルプは最終実験でクレジットされます）

cssrotationcenter
28
anthonytherockjohnson

Divのサイズを制限していません。

実際、divはまったく必要ありません。クラスを画像に適用するだけです。

.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;
    display: block;
}
 
@-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);}
} 
<img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/>
14
Paulie_D

要素のサイズを設定し、transform-Originプロパティを指定する必要があります

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

フィドルの例： http://jsfiddle.net/RbXRM/3/

25
fcalderan

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 it

1
G-Cyr