Comment puis-je définir un point de rotation pour un élément en CSS ?

Question

Est-il possible de définir le point de rotation en CSS ? Le point de rotation par défaut est à 50 %, 50 %. J'ai essayé :

transform: rotate(230deg); 
rotation-point:90% 90%;

Mais cela ne fonctionne pas... Des suggestions ?

Answer 1

Cela va définir le point de rotation pivot en haut à gauche de votre élément et le faire pivoter :

transform : rotate(-25deg);
transform-origin : 0% 0%;

jetez un œil à la classe .nav_item_txt :

http://jsfiddle.net/KHkX7/

Answer 2

Utilisez la propriété CSS transform-origin :

.class {
    transform-origin: 0 0;
}

Answer 3

Essayez d'utiliser la propriété transform-origin à la place, rotation-point n'est pas pris en charge...

Pour effectuer une rotation sur le point en haut à droite d'un élément (y compris toutes les cibles) :

-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;

Answer 4

Il suffit d'aller sur http://www.w3schools.com/cssref/css3_pr_rotation-point.asp et de lire attentivement. il est dit que aucun des principaux navigateurs ne prend en charge cette propriété.