CSS Cross Browser Transforme - même dans IE
Un exemple d'une page en utilisant la CSS Transformer la propriété et cssSandpaper. Visible dans la plupart des principaux navigateurs, y compris Internet Explorer. Mise en page basée sur le travail effectué par Paul Hayes dans son article
Avant de commencer à parler des détails de ma solution, nous allons jeter un oeil à quelques exemples dans l'action. Le code suivant a été testé avec Firefox 3.5, Safari 4, 4 Chrome, Internet Explorer 6 et plus.
(Les exemples fonctionnent aussi sur ma copie de Opera 10.5, bien que je l'ai vu échouer sur d'autres installations - je mettrai à jour ce post quand je trouve pourquoi).
cssSandpaper à la rescousse
Je puis, de voler une phrase de Russel Peters, a commencé à Hurt réel Bad:
- la syntaxe de transformation est très évidente:
mais le code de filtre IE est assez intimidant:
Les chiffres effrayants que le filtre utilise DXImageTransform.Microsoft.Matrix nécessite la connaissance des mathématiques de la matrice et vecteur. Même si il y a un grand article de Wikipedia sur le sujet. même le vouloir serait mathématiquement doué de ne pas faire les calculs à faire une rotation simple CSS (je voudrais souligner ici que même si j'ai un diplôme universitaire en mathématiques, je déteste faire des calculs dans ma tête. Si vous ne le faites pas croyez-moi, regardez-moi trouver un pourboire au restaurant quelque temps. Je ne plaisante pas).Faire pivoter l'aide de CSS transformer
Tourner en utilisant IE Filtrer
Le code est actuellement en phase bêta, mais je pense qu'il est en assez bonne forme que les développeurs peuvent commencer à jouer avec ces effets vraiment cool aujourd'hui et de le faire fonctionner dans presque tous les navigateurs.
Différences de navigateur
Après avoir fini cssSandpaper et joué avec des transformations, j'ai trouvé quelques légères différences dans les navigateurs ainsi les traités:
- Si vous transformez un objet avec des barres de défilement, il est possible de faire défiler l'objet dans la plupart des navigateurs dans la plupart des cas. Cependant, dans la page de cube je moquais, je remarqué le comportement suivant:
- le côté tourné vers la gauche du cube est pas facilement accessible dans Internet Explorer.
- les barres de défilement ne semblent pas du tout dans Opera.
- les barres de défilement ne sont pas tout à fait clair dans Chrome pour Windows, bien que l'on peut encore faire défiler les côtés si vous pouvez deviner où ils sont.
- Firefox 3.5 pour Mac met les barres de défilement dans des endroits étranges (cela a été corrigé 3.6).
- Dans Internet Explorer, le texte peut être sélectionné, mais il faut parfois quelques essais pour savoir comment le faire (essayez de sélectionner du texte avec IE dans mon cube mockup et vous verrez ce que je veux dire).
- Lors de la sélection du texte dans Firefox, le texte tend à sauter très légèrement pour une raison étrange (ce qui est tout à fait un effet subtil qu'il est probablement pas perceptible dans la plupart des cas).
- Il ressemble à Internet Explorer prend le bloc de HTML, le convertit en une image et ne puis la Transform (je ne sais pas. Je devine). En conséquence, le texte dans certaines situations se penchera un peu floue, surtout si l'échelle est impliqué.
Comme prévu, le rendu du texte transformé dans les autres navigateurs diffère légèrement:
L'utilisation cssSandpaper
Ce qui suit est une description de la façon d'utiliser transformer. ainsi que deux autres propriétés CSS3 que cssSandpaper supporte, box-shadow et gradient.
-sable transformée
La description
Transforms permettent aux développeurs de rotation, l'échelle et l'inclinaison des blocs de HTML via CSS.
où
Éléments HTML tourne. angle peut être en degrés (par exemple rotation (30deg)) ou radians rotation (1.3rad)
Scales éléments HTML. sx et sy sont des nombres, où 1 représente la taille d'origine, 2 représente deux fois la taille, etc. Notez que si sy est pas spécifié, il est supposé être égal à sx. Des fonctions similaires sont scaleX (sx) et scaleY (LY).
skewX (ax). et skewY (ay)
Ces fonctions biaiser l'objet autour des axes x et y par les angles indiqués en degrés ou radians.Note: l'inclinaison (ax, ay) fonction, ce qui permet de travailler dans les navigateurs qui prennent en charge CSS3 Transforms est nativement ne font plus partie du W3C CSS3 spec et ne sera plus prise en charge par Firefox.
la matrice (a, c, b, d, tx, ty)
Si vous êtes familier avec la multiplication de matrices, notez que c et b sont inversées. Cela fait suite à la façon dont Firefox a mis en œuvre cette méthode (je crois que les navigateurs basés sur WebKit inverse ces chiffres).
Remarque: Les navigateurs non-Explorer prennent en charge la fonction de traduction ainsi. Je ne l'ai pas été en mesure de trouver un moyen de faire ce travail IE à ce moment, en raison d'un problème technique avec la propriété filtre Matrice de l'IE (pour ceux qui veulent des détails, j'utilise sizingMethod = « auto développer » lorsque vous utilisez le filtre à matrice ne prend pas en charge les traductions et l'utilisation sizingMethod = « culture » ne convient pas à imiter la propriété transform). Pour cette raison, les valeurs tx et ty de la fonction de matrice () ne sont pas pris en charge.
-sable box-shadow
La description
box-shadow nous permet de prendre un élément de niveau bloc et mettre une ombre en dessous. Il peut également définir un facteur de flou pour donner un effet plus chaud à l'ombre.
Notez que dans IE, le flou rayon est pas pris en charge, en raison d'un manque de soutien dans le filtre DropShadow IE.
-sable gradient
La description
Gradients sont des mélanges progressifs de couleur, et peut être linéaire ou radial:
Le type peut être linéaire et la pente. Bien que Internet Explorer ne supporte pas les gradients radiaux à l'heure actuelle, en raison de limitations de filtre à gradient d'IE. Internet Explorer également ne supporte que de simples gradients linéaires (à savoir seulement horizontale et verticale et que deux couleurs).
Autres problèmes connus
- À l'heure actuelle, lorsqu'un utilisateur change la taille de la police dans IE, la mise en page est un peu foiré. Cela sera corrigé dans une future version.
- Les scripts dans IE ne peut se faire via le obj.style.transform habituelle. Il y a, cependant, une autre façon de script les propriétés prises en charge de cssSandpaper qui seront décrites dans un poste de futur blog (je ne veux pas garder tout le monde en suspens ... il est juste que je me sens comme je l'ai passé trop de temps sur cette poste et je veux obtenir au moins cette partie la :-) de porte).
- Opera 10.5 genre d'œuvres. Il fonctionne sur ma copie, mais pas sur une autre copie que je l'ai vu. Je ne sais pas pourquoi, mais je trouverai bientôt et après la mise à jour et quand je fais.
- Le script de gradient de Weston Ruter a plus de fonctionnalités. Je les intégrer dans une future version.
Travail futur
Si quelqu'un souhaite obtenir contribuer au code ou faire des tests, j'aimerais l'aide aussi. -)
Remerciements
Je voudrais remercier Weston Ruter pour ses Dégradés CSS dans le script Canvas, depuis que j'ai gagné beaucoup de ses idées avec sa permission (j'implantera plus des fonctionnalités avancées de son script dans une future version de CSS3Sandpaper). Je voudrais également remercier James Coglan pour la construction de Sylvester donc je n'a pas eu à.
Je suis étonné de voir comment les choses dans la région HTML / CSS progrès ... Le cube semble absolument incroyable dans mon navigateur (FF 3.6) et travaille à IE6, en effet! Et je peux sélectionner le texte et cliquez sur les liens!
5 ans à partir de maintenant, où seront Flash et divers éditeurs graphiques (Illustrator, Fireworks, Photoshop)? Allons-nous avoir besoin d'eux pour la conception Web du tout, ou nous allons utiliser HTML et CSS et JS pour tout? Rotation, transformer, goutte-ombres, des dégradés, des coins arrondis ... 5 ans il y a tout cela a été possible avec Fireworks et Photoshop seulement, et rappelez-vous juste, combien complexe et difficile était d'appliquer simplement des coins arrondis aux onglets dans un bloc de navigation (coulissant portes tout le monde) - il fallait avoir plusieurs images, puis appliquez une html / css complexe pour faire ce travail tout!
Mais bientôt, nous serons en mesure de le faire sans aucun éditeur d'image, et aussi simple que le code possible!
Merci pour l'article inspirant et démos. )
un travail fantastique, cela m'a sauvé beaucoup de temps sur un projet - merci!
Wow, le rendu d'Opera est le meilleur (anticrénelage croustillant, non polyédrique, pas floue!)
Un excellent travail, ce qui est vraiment des choses impressionnantes.
Salut. Excellent travail fait!
Quoi qu'il en soit, il est très agréable de voir quelqu'un d'autre résoudre le même problème - et avec de plus grands progrès :)
Cher Zoltan, je vous remercie pour le plug-in parfait!
Nous allons attendre FF3.0 et Opera 9 arrive à expiration.
Aussi font-face a un support de navigateur similaire comme css transformée.
impressionnant! en particulier fantastique texte de sélection et de défilement)))
Les barres de défilement fonctionnent dans ma version d'Opera 10.50 Build 3296.
Même si on ne peut pas accéder à l'objet .style.transform dans IE, cssSandpaper permettra une alternative à l'écriture -S- transformée. Ce sera présenté dans un futur billet de blog très bientôt.
Très bel article ... Merci d'avoir rendu cela possible.
Daniel Glazman, CSS WG coprésident
Bien fait sur la pièce d'origine transformation. Mon script ne le supporte pas ... encore. ;-)
Hmm ... ça n'a pas du tout dans Opera pour moi, sur Vista. Mais il était excellent sur Firefox.
Au début, je pensais, je voudrais l'utiliser ou le voir utilisé plus souvent. Mais à la réflexion, je me déplace vers des conceptions plus simples, la suppression de bits de graphiques.
Il a l'air encore frais bien!
Merci pour cela. Bien que je suis un peu (plus) irrated chez Microsoft maintenant (que je ne l'étais il y a cinq minutes). Ce que je lis ici est « Microsoft a construit des filtres propriétaires astucieuses qui peuvent effectuer un grand nombre de transformations et effets proposés par CSS3. En fait, ils l'ont fait la plupart des travaux nécessaires à l'obtention tout cela fonctionne, puis arrêté juste avant de le rendre facile aux développeurs « .
Agréable. Qu'en est-il d'ajouter les propriétés des fournisseurs mis en œuvre et les fonctions du CSS afin que les utilisateurs avec JS désactivé peuvent encore bénéficier des implémentations de CSS3 qui existent actuellement dans les navigateurs modernes.
L'homme les transforme regard doux.
Grandes choses garder à venir.
J'ai été tenté d'inclure une description des mathématiques de la même façon, mais quelques de mes collègues me persuade pas, craignant le concepteur de sites Web moyen s'enfuir en hurlant. Depuis que j'ai eu la même réaction face à l'écriture d'une telle bête, je (heureusement) suivi leurs conseils. )
Par ailleurs, l'autre article fait un meilleur travail que je l'aurais.
Mais pourquoi vos propriétés utilisent un préfixe? Si mon navigateur déjà pris en charge les propriétés, il ne maintenant pas plus à moins que les scripts est activée (et d'être une mauvaise personne, j'accéder au Web2.0 que sans scripts, à râler mauvaise conception web)
Je dois donc utiliser transformer et -S- transformée pour que cela fonctionne bien dans un futur navigateur.
Y at-il une raison technique le script n'a pas seulement Parse transformer aussi? (La syntaxe doit être la version officielle de toute façon, il ne devrait pas faire une différence)
Je suis vraiment tiraillés ce qu'il faut faire ici. Je voulais simplement utiliser « transformer » et « gradient », mais de ce que je l'ai vu, ces propriétés CSS3 ont pas encore été mis au point (ce qui explique pourquoi -moz-transform et -webkit transformée exist. Par exemple, la syntaxe gradient est largement différent entre firefox et webkit). Je comprends votre inquiétude, mais jusqu'à ce qu'ils soient mis au point, je pense que je vais devoir continuer à utiliser les propriétés -S- (pour l'instant).
Je barboteurs avec ce genre de choses dans IE pour mon projet-à-dire css3.js.
Après plusieurs heures d'expérimentation exhaustive, je fini par venir aux mêmes conclusions que vous; Il est tout simplement pas possible d'obtenir IE pour rendre les objets transformés d'une manière qui correspond à la spécification W3C en utilisant simplement la matrice dans une feuille de style transforme.
Ce qui est excellent travail. -)
Malheureusement, je suis venu à travers un conflit qui rend ce impropre à un projet sur lequel je travaille.
J'utilise jQuery pour ajouter dynamiquement des éléments à une page et générer de façon aléatoire la quantité de rotation qui leur est appliquée. Parce que la rotation aléatoire est généré dynamiquement, je dois l'attacher aux éléments comme un style en ligne, et cela semble jouer avec la façon dont votre méthode fonctionne.
J'ai essayé de trouver une solution de contournement, comme je l'aimerais soutenir la rotation dans d'autres navigateurs, mais, à ce jour, je suis venu les mains vides.
Je me demandais si vous pourriez avoir des idées?
Si je comprends bien la question, il existe une solution pour ce décrite dans l'article de suivi sur les animationing transforme css. Depuis la manipulation de la propriété de l'objet de style transformation ne fonctionne pas, j'ai exposé quelques méthodes telles que cssSandpaper.setTransform () à l'écriture des propriétés CSS.
Permettez-moi de savoir si cela ne / ne répond pas à vos besoins ... Je veux faire de cette bibliothèque comme complet et aussi facile à utiliser que possible.
Travail Absolument génial! Merci beaucoup pour le partager!
La lecture du CSS et la conversion automatique est une belle touche - mais - il est trop technique de l'OMI. Vous seriez bien mieux juste travailler avec les noms de classe - il expose la mécanique à d'autres développeurs d'une manière beaucoup plus simple, sans les avoir à travailler dans votre analyse CSS; et il permet d'économiser sur l'analyse CSS! et il évite diverses questions de contexte telles que les associations de safetycopy
Où origine est « 100% 0 » (en haut à droite):
Dx = x - (Math.cos (a) * x)
Dy = 0 - (Math.sin (a) * x)
Où est l'origine « 0 100% » (en bas à gauche):
Dx = Math.sin (a) * y
Dy = y - (Math.cos (a) * y)
Où origine est « 100% 100% » (en bas à droite):
Dx = (x + (Math.sin (a) * y)) - (Math.cos (a) * x)
Dy = 0 - (((Math.cos (a) * y) + (Math.sin (a) * x)) - y)
Et bien sûr « 0 0 » n'a pas besoin de traduction.
Ce, d'ailleurs, est avec sizingMethod réglé sur « clip original », pour correspondre à ce que font les autres navigateurs.
Impressionnant travail sur ce point - je vais certainement obtenir beaucoup d'utilisation de cette bibliothèque!
Merci de me faire savoir au sujet de ce bug. Je vais certainement regarder vos suggestions. avez-vous une URL que vous pouvez poster de la page incriminée?
Je ne l'ai jamais vu ce comportement avant. Je dois voir si je peux reproduire ce problème. Avez-vous un exemple que je pouvais voir? Toute aide serait aider à faire cssSandpaper encore mieux.
Alors, comme une solution rapide, il suffit d'ajouter un peu au hasard css bas du fichier. Cela a fait l'affaire pour moi:
Excellent outil, merci!
Ajouter la classe #notEmpty au fichier font.css à elle semble avoir un certain contenu.
Bonjour, est-il possible de faire des changements de manière interactive? En cliquant sur un bouton par exemple pour faire pivoter une couche div 45 degrés. Merci de partager votre travail excelent.
travail génial! Un q ... Je constate que partiellement transparents (arrière-plans à la fois PNG et GIF) ne sont pas transparents lorsque vous utilisez la fonction de rotation / échelle dans IE uniquement. Au lieu de cela, ils ont un fond noir. Aucune suggestion?
Pour MSIE8, l'étiquette de compatibilité IE7 est essentielle.
Je ne sais pas s'il existe une solution pour cela - je vais le garder à l'esprit quand je suis mise à jour cssSandpaper au cours du mois prochain.
Salut Zoltan, Pack incroyable, merci beaucoup pour votre travail acharné!
En second lieu, le script ne semble pas reconnaître: vol stationnaire. Par exemple, j'ai un -Faites sur le vol stationnaire, qui déplace un élément comme si elle était touché ... Est-ce un problème connu?
Désolé, j'ai aussi oublié. Le script se bloque lorsque sélecteurs CSS comprennent: nième enfant. J'ai un autre paquet JS (en cours d'exécution selectivizr.js) qui permet à ces sélecteurs dans les versions antérieures d'Internet Explorer, mais CSSSandpaper renvoie une erreur et meurt comme non valide. -) Juste un heads-up!
L'un des problèmes communs gens viennent à travers est que cssSandpaper ne fonctionnera pas correctement avec feuilles de style externes si la page n'est pas sur un serveur web. Si tel est le cas, essayer et voir si cela est le problème.
Merci beaucoup pour cela. Bon travail :)