hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment activer la transformation CSS dans IE6-8 [Astuce rapide]

Les navigateurs modernes ont beaucoup de support pour la plupart des propriétés CSS3. Vous pouvez essentiellement appliquer facilement des animations CSS, des transformations et des dégradés. Cependant, il existe encore de nombreux utilisateurs d'anciennes versions de versions d'Internet Explorer qui ne prennent pas exactement en charge les nouvelles propriétés CSS3 . Dans cet article, je vais partager des astuces pour activer la transformation CSS sur IE6-8 .

La propriété CSS Transform permet de transformer un élément dans un espace bidimensionnel ou tridimensionnel . Vous pouvez traduire, redimensionner, faire pivoter et incliner un élément à l'aide de CSS Transform. Pour les navigateurs modernes comme Firefox, Opera et Webkit, le navigateur supporte CSS Transform avec leurs préfixes spécifiques au fournisseur (en utilisant respectivement -moz-transform, -o-transform et -webkit-transform ), mais vous ne le trouverez pas sur Internet Explorer. Donc, ici, je vais utiliser la bibliothèque javascript appelée cssSandpaper qui permet cross transformations CSS du navigateur, même dans l'ancien IE.

Commencer

Tout d'abord, téléchargez cssSandpaper à partir du référentiel Github. Ensuite, incluez les bibliothèques JavaScript requises suivantes, fournies avec cssSandpaper.

La propriété -sand-transform

cssSandpaper introduit une nouvelle propriété préfixée pour appliquer la transformation . Cette nouvelle propriété peut être utilisée conjointement avec les autres préfixes de fournisseur de navigateur tels que -moz-transform, -webkit-transform ou d'autres propriétés préfixées du navigateur, comme suit:

 #container {-moz-transform:  ; -webkit-transfrom:  ; -sand-transformer:  ; transformer:  ; } 

Le cssSandpaper hérite des fonctions CSS standard pour effectuer la transformation telle que la rotation et la mise à l'échelle. Voici une liste des fonctions que vous pouvez utiliser dans la propriété -sand-transform .

  • rotate (angle) est utilisé pour faire pivoter un élément en degrés ou en radians. par exemple: -sand-transform: rotate(45deg)
  • scale (sx [, sy]) est utilisé pour mettre à l'échelle un élément. ex: -sand-transform: scale(1[, 2]) cela signifie que nous mettons à l'échelle l'élément sur l' axe X en fonction de la taille de l'original et sur l' axe Y comme deux fois la taille d'origine.
  • skewX (ax) et skewY (ay) sont utilisés pour incliner un élément autour des axes x et y selon les angles spécifiés en degrés ou en radian. par exemple: skewX (30deg)
  • la matrice (a, c, b, d, tx, ty) est utilisée pour faire une matrice de transformation 2D composée des six valeurs spécifiées.

Exemple d'utilisation

En supposant que nous avons construit une boîte en utilisant un

. Et maintenant vous voulez que la boîte déplace 200px horizontalement de sa position initiale et, en même temps, la fasse pivoter de 45 degrés. Vous pouvez utiliser cssSandpaper pour obtenir cet effet, comme suit:

 #box {width: 150px; hauteur: 100px; -sand-transform: translate (200px, 0) fait pivoter (45deg); } 

Vous pouvez voir la démo ci-dessous. Prenez note que vous devriez le regarder dans Internet Explorer 6-8 aussi bien.

  • Voir la démo
  • Source de téléchargement

Conclusion

Ce n'est peut-être pas la solution la plus élégante car nous avons besoin d'empiler un tas de bibliothèques JavaScript pour obtenir cet effet simple. Mais dans le cas où votre patron ou client insiste sur l'activation de la rotation dans Internet Explorer 8 (pour quelque raison que ce soit absurde), vous pouvez utiliser cssSandpaper pour y arriver.

8 choses que vous ne voulez pas dans un partenaire de démarrage

8 choses que vous ne voulez pas dans un partenaire de démarrage

Tout le monde que vous connaissez est le début de leur propre entreprise - les gens de tous les groupes d'âge: les adolescents, les adultes dans la vingtaine, la trentaine, la soixantaine. Et la plupart des gens réalisent qu'aller seul est un exploit difficile . C'est à ce moment-là que l'on évoque la possibilité de faire appel à un partenaire, qu'il s'agisse de doubler le capital de départ ou d'apporter un ensemble de compétences dont vous n'avez pas besoin. Et c'

(Conseils techniques et de conception)

Faire des éléments sur votre site Draggable avec Draggabilly.js

Faire des éléments sur votre site Draggable avec Draggabilly.js

Il ya beaucoup de tutoriels sur la façon de rendre les choses glisser dans une page Web . jQuery est l'un des moyens les plus faciles. Vous n'avez même pas besoin de l'interface utilisateur de jQuery, juste un peu d'aide de la fonction de direction de la souris et peut-être une manipulation facultative. M

(Conseils techniques et de conception)