CSS transformer les matrices

J'utilise les règles CSS suivantes pour faire une transformation sur un élément simple H2, seul le texte à l'intérieur:CSS transformer les matrices

-moz-transform: matrix(0, -1, 1, 0, 130px, 118px); 
-webkit-transform: matrix(0, -1, 1, 0, 130px, 118px);

Il fonctionne comme prévu dans Firefox; Je ne fonctionne pas du tout dans Safari/Windows et Chrome/Windows: le H2 reste là où il est. Est-ce que je fais quelque chose de mal ou les CSS ne sont-elles pas actives dans ces deux navigateurs sous Windows?

Source

2009-11-07 Kaze no Koe

Screenshot http://i33.tinypic.com/2nhnl7p.png

Il y a une sorte de mise en œuvre, mais il est définitivement rompu. Si je supprime les px je peux l'obtenir au moins au rendu (il ne semble pas rendre avec eux ou le voir comme CSS valide), mais il ne laisse pas l'écran défiler vers le bas comme le fait Firefox. Pointez-le vers un emplacement dans le cadre (sans les px) et il affiche. Supprimer les px ne semble pas non plus faire de différence sur la position, ce qui est bien.

Source

2009-11-07 20:49:09 tom

Je ne veux pas être impoli, mais la capture d'écran est très petit et je ne peux même pas comprendre de quoi tu parles. Pardon. –

http://i33.tinypic.com/2nhnl7p.png - lien direct vers l'image. Fondamentalement -webkit-transform: matrice (0, -1, 1, 0, 130, 118); fonctionne -webkit-transform: matrice (0, -1, 1, 0, 130px, 118px); ne fait pas. Je ne sais pas pourquoi. WebKit suppose également que les deux derniers paramètres sont des pixels, de sorte que vous obtenez le même rendu que Firefox. – tom

OH! OK merci beaucoup! –

Les MDC docs sont assez claires:

Note: Gecko (Firefox) accepte une valeur de longueur pour tx et ty. Safari (WebKit) et Opera supportent actuellement un nombre sans unité pour tx et ty.

Après un long post expliquant the logic of the matrix, Brendan Kenny conclut qu'il faut

« ajouter des unités à e et f pour Firefox (qui ne fait pas vraiment de sens , mais pour l'instant: bien)."

Ce qui est vrai - pour l'ordinateur - car les traductions linéaires ne sont techniquement pas différentes des autres entités de la matrice. Mais c'est injuste, car - pour nous, les humains - il est logique que les traductions linéaires soient en valeur, et il n'y a pas d'autre moyen pour que le navigateur fasse des calculs en pourcentage.

Heureusement, l'implémentation FF va gagner. En outre, j'ai lu, mais pas encore testé que les troisième et quatrième valeurs sont entrées dans Webkit dans l'ordre, mais dans FF et IE à l'envers. A partir de la documentation:

-moz-transform: matrice (a, c, b, d, tx, ty)

Where a, b, c, d build the transformation matrix and tx, ty are the translate values. 
    ┌  ┐ 
    │ a b │ 
    │ c d │ 
    └  ┘

Source

2010-10-13 12:07:06 SamGoody

CSS transformer les matrices

Répondre

Questions connexes