webkit-transforms : saisie des transformations css

Allez à webkit par le menu Plugins.

Si le menu Plugins est vide, ou ne contient pas le plugin :

  • Vérifiez que le plugin « webkit-transforms.rev » se trouve bien dans le dossier de plugins « htmlstyles_plugins »; sinon placez-le à l'intérieur.
  • Cliquez l'icone « plugin update » plugins en haut à droite de l'écran HTML Styles pour mettre à jour le menu en fonction des plugins installés.
htmlstyles.rev
htmlstyles_plugins
webkit-transforms.rev

bouton plugin Cliquez l'icone plugin version pour accéder à l'aide en ligne.

Exemple de transformations saisies

éditeur de webkit-transforms
Boutons de commande
effacer tout Efface tout. copie dans le Presse-PapierCopie dans le Presse-Papier les instructions et génère la forme attendue par les principaux navigateurs.
menu local de choix des transformations icone des transformations choisies Choix de la transformation à saisir, reflété par une icone spécifique. champs désactivé champs vierge lorsqu'aucune fonction n'est précisée.
champs de saisie de l'origine champs de saisie d'une origine en x ou en y. menu popup des constantes permet de placer une constante de longueur au moyen du menu. constantes de largeur
champs saisie longeur ou ratio champs saisie longeur ou ratio. champs angle unités d'angles Champs de saisie d'un angle de rotation ou de torsion; l'unité est saisie par ce menu:
ajouter ligne Ajoute une ligne après la ligne courante (maximum 10 en tout). supprimer ligne Supprime la ligne courante.
Transformation et support par les navigateurs
Propriété : choix au moyen du menu local
valeur par défaut
Safari Firefox/ Mozilla IE8 Opera iCab

-webkit-transform-origin

webkit-transform-origin
Définit l'origine de l'élément prise en compte dans le -webkit-transform.
Syntaxe
-webkit-transform-origin: posx [posy]
Paramétres: posx,posy : x et y origine en pourcentage ou longueur.
Constantes et utilisation
topplace l'origine en y sur le top de la bordure de l'élément.
centerplace l'origine en x ou en y sur le centre de la bordure de l'élément.
Si cette constante apparaît avant left ou right, spécifie l'origine en y.
Si cette constante apparaît après top ou bottom, spécifie l'origine en x.
Si elle apparaît seule, centre à la fois sur x et sur y.
bottomplace l'origine en y sur le bottom de la bordure de l'élément.
leftplace l'origine en x sur le left de la bordure de l'élément.
rightplace l'origine en x sur le right de la bordure de l'élément.
-webkit-transform-origin -moz-transform-origin NS -o-transform-origin -icab-transform-origin

-webkit-transform

Définit une ou plusieurs transformations appliquées à un élément, en fonction de l'origine de l'élément spécifiée par -webkit-transform-origin.
Les transformations sont spécifiées par les fonctions suivantes :
-webkit-transform: rotate(15deg) scale(1.25,0.5);

rotate

webkit-transform: rotate
rotation autour de l'origine de l'élément.
rotate(angle)
L'angle est spécifié en degrés, radians ou grades.

scale

webkit-transform:scale
Mise à l'échelle.
scale(scaleX [, scaleY])
facteur d'échelle appliqué sur l'axe X et Y.

skew

webkit-transform: skew
Spécifie une distorsion selon les axes X et Y.
skew(angleX [, angleY])
Les angles sont spécifiés en deg, rad ou grad.

translate

webkit-transform: translate
Spécifie un déplacement vectoriel.
translate(deltaX [, deltaY])
deltaX, deltaY : déplacement à effectuer selon axe (pourcentage ou longueur).
-webkit-transform -moz-transform NS -o-transform -icab-transform