web-dev-qa-db-fra.com

Faire pivoter l'image autour du centre css3

J'essaie de faire tourner un monde autour de son centre - mais je ne peux pas le faire tourner correctement (autour de son propre axe central)

C'est difficile à expliquer alors j'ai fait une démo:

.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>

Merci pour l'aide (l'aide de travail sera créditée lors de l'expérience finale)

cssrotationcenter
28
anthonytherockjohnson

Vous ne limitez pas la taille du div.

En fait, vous n'avez pas du tout besoin du div, vous pouvez simplement appliquer la classe à l'image:

.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

vous devez définir la taille de l'élément et spécifier le transform-Origin propriété

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

Exemple de violon: http://jsfiddle.net/RbXRM/3/

25
fcalderan

vous devez tourner uniquement l'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;
}

ou modifier l'affichage de div.world donc ça it shrinks sur l'image (inline-block,inline-table,table) ou même float it

1
G-Cyr