☰

画像を中央を中心に回転させる CSS3 質問する

tag-icon • tag-icon css rotation center
画像を中央を中心に回転させる 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>

ご協力ありがとうございました（作業のご協力は最終実験で評価されます）

ベストアンサー1

要素のサイズを設定し、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/

おすすめ記事