jQuery Girl
  1. jQuery Girl
  3. Rotation d’un div Comment définir le point central?
Intereting Posts
Comment diviser une chaîne en jQuery avec plusieurs chaînes comme séparateur Comment faire une liaison de modèle avec Jquery Ajax jQuery Animate – couleur et largeur de la bordure jQuery mouse down et redimensionnable Comment afficher une icône en un point d’un graphique à courbes à l’aide de d3.js Table Row Click, Chargement externe Comment faire en sorte que la fenêtre de dialog jQuery rest au centre du navigateur (situation spécifique) Comment vérifier si un object jQuery existe dans un tableau? Définir des cases à cocher sur la méthode d’édition dans Rails 4 Evénement Fire OnAppend pour l’élément jQuery lorsqu’il est ajouté au DOM Comment créer un formulaire qui recherche un élément dans un rayon spécifique à l’aide de l’API Google Maps? Comment définir une variable globale en Javascript? Que signifie fn dans jQuery? jsTree afficher / masquer les nœuds Les appels Chrome et Firefox CORS AJAX sont interrompus sur certaines machines Mac

Rotation d’un div Comment définir le point central?

Mon javascript est: 

$(function() { var $elie = $(".circle"); rotate(0); function rotate(degree) { $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); timer = setTimeout(function() { rotate(++degree); },5); } });

Voici la démo: http://fakeheal.eu/demo/

Comment faire pivoter la div autour d’un autre point central?

Vous utiliseriez transform-origin pour cela: 

 $elie.css("-webkit-transform-origin", "50% 100%" );

ou 

 transform-origin: 100% 40%; -ms-transform-origin: 100% 40%; /* IE 9 */ -webkit-transform-origin: 100% 40%; /* Safari and Chrome */ -moz-transform-origin: 100% 40%; /* Firefox */ -o-transform-origin: 100% 40%; /* Opera */

VIOLON

MODIFIER:

Pour tourner autour du centre de l’élément .circle , il faut d’abord une hauteur, sinon il n’ya pas de centre. Vous pouvez ensuite utiliser des pourcentages, ou la propriété beaucoup plus pratique du center , comme suit: 

 transform-origin:center center;

MANIFESTATION