Si vous Google, "faites un tonneau", la page entière effectue une rotation de 360. Quelqu'un at-il une idée de la façon dont Google procède? J'ai désactivé javascript, et c'est toujours arrivé, alors peut-être une rotation css?
Réponses
Trop de publicités?
Leo
Points
278
Comme dit ci-dessus, avec des animations CSS3 et transformer.
Wesbo a montré un moyen d'appliquer l'effet sur n'importe quel site. Vous pouvez voir une démonstration et des instructions ici .
@-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
@keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
drwelden
Points
4263
C'est une transition CSS: https://developer.mozilla.org/en/CSS/CSS_transitions
-moz-transform: rotate(360deg);
-moz-transition-property: all;
-moz-transition-duration: 5s;
Exemple pour Mozilla ci-dessus, utilisez -o et -webkit pour cibler d'autres navigateurs.
BenM
Points
23070
Il utilise des animations CSS personnalisées. Voir les règles CSS appliquées au <body> ici:
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
Joseph Marikle
Points
25280
sonne comme une transformation de rotation css3 appliquée aux balises body ou html
