Comment utiliser des transformations CSS3

category Ordinateurs et logiciels / Programmation / Html

CSS3 inclut la capacité à appliquer des transformations géométriques sur tout élément dans votre page Web HTML5. Cela fournit un niveau remarquable de contrôle visuel pas disponibles auparavant pour les développeurs web.

La transformer attribut vous permet d'appliquer une transformation mathématique à tout div. Lorsque vous appliquez transformer à un élément, vous devez appliquer une ou plusieurs des paramètres suivants pour décrire le type de transformation:

  • traduire: Déplace l'objet à partir de sa position par défaut. Traduction nécessite deux paramètres, une mesure de X et Y d'une mesure. Utilisez les unités standard de mesure de la CSS.

  • tourner: Pivoter l'image autour de sa valeur centrale. Prend un paramètre, une mesure d'angle en degrés. (Par exemple, 30 degrés est 30deg.)

  • échelle: Modifie la taille de l'objet. Les changements de version standards à la fois la taille horizontale et verticale de manière uniforme. La scaleX et scaley attributs peuvent être utilisés pour ajuster l'échelle le long d'un axe individuel. L'échelle est mesurée dans les unités standard de mesure de la CSS. Si l'échelle est plus grand que 1, l'objet est plus grand que l'original. Une échelle entre zéro et un fait le point inférieure à ce qu'elle était.




  • skew: Cela vous permet d'incliner l'élément d'un certain angle. Le paramètre nécessite une mesure d'angle en degrés. La skewX et skewY variations permettent un contrôle plus complet de la transformation.

Vous pouvez combiner plusieurs paramètres en les énumérant après l'attribut transform séparés par des espaces.

Pour illustrer, imaginez l'extrait HTML suivant:

case 1
 
case 2
 
case 3
 
case 4
 
la case 5

Le code montre cinq identiques divs. À titre d'illustration, tous les divs partager la même CSS commune:

# box1, # box2, # box3, # box4, box5 # {width: 100px; hauteur: 80px; border: background-color noir solide 3px: jaune}

Appliquer les variations de l'attribut à chaque élément pour voir comment les transformations fonctionnent.

image0.jpg
# box2 {transform: traduire (100px, 0px) -} # box3 {transform: rotate (45deg) -} # box4 {transform: échelle (2) traduit (100px, 0px) -} # box5 {transform: inclinaison (3) -}

Notez que le support du navigateur est en train de changer sur cet élément. Chrome et Safari attendent toujours le -webkit préfixe, mais Firefox et Opera soutiennent la version non préfixée. IE 10 fonctionne théoriquement avec la version standard, mais la version 9 exige la -Mlle- préfixe, et les versions antérieures de IE ignorent tout simplement les transformations tout à fait. Si vous affichez le code source du site transform.html, vous verrez plusieurs versions pour gérer les différents navigateurs:

 # box2 {transform: traduire (100px, 0px) - webkit-transform: traduire (100px, 0px) - ms-transform: traduire (100px, 0px) -}

Finalement, le bon sens se dégager et préfixes spécifiques au fournisseur ne sera plus nécessaire, mais pour le moment, il est plus sûr de les mettre tous en place. Si vous voulez attraper les anciennes versions de Firefox et Opera, vous pouvez également inclure ces (-moz- et -o-) Préfixes ainsi.

Articles Similaires

A propos Auteur
Comment représenter graphiquement et de transformer une fonction exponentielle Comment représenter graphiquement et de transformer une fonction exponentielle

Représentation graphique d'une fonction exponentielle est utile lorsque vous souhaitez analyser visuellement la fonction. Cela vous permet de voir vraiment la croissance ou la décroissance de ce que vous avez à faire. La fonction de parent de…

Comment transformer une fonction horizontale Comment transformer une fonction horizontale

Vous pouvez transformer une fonction dans une fonction connexe en le déplaçant horizontalement ou verticalement, la retournant (réfléchissant) horizontalement ou verticalement, ou d'étirement ou de rétrécissement horizontalement ou…

Comment transformer verticalement graphiques mères Comment transformer verticalement graphiques mères

Lorsque vous appliquez un vertical transformation à un graphe de parent, vous étirez ou diminue le graphique le long de la y-axe, ce qui change sa hauteur. Un certain nombre (ou coefficient) En multipliant en face d'une fonction entraîne la…

Soutien CSS3 et navigateur Soutien CSS3 et navigateur

L'état actuel des normes pour le soutien de navigateur Web pour les effets CSS3 et transformations est en pleine mutation. Très probablement, au fil du temps les pouvoirs-que-être dans le monde du navigateur - ceux qui publient Internet Explorer,…

Comment ajouter plusieurs images de fond et de faire pivoter des objets avec CSS3 Comment ajouter plusieurs images de fond et de faire pivoter des objets avec CSS3

Avec CSS3, vous pouvez facilement ajouter autant d'images d'arrière-plan à un seul élément comme vous voulez. Vous pouvez également faire pivoter les images. L'illustration montre un exemple d'un conteneur avec trois images de fond, un motif,…

Comment appliquer l'effet border-radius CSS3 Comment appliquer l'effet border-radius CSS3

L'effet CSS3 border-radius définit des coins arrondis. Et, vous devez utiliser des préfixes spécifiques au navigateur lors de la définition d'un border-radius. Voici quelques règles pour définir un border-radius:Vous ne pouvez pas appliquer un…

Comment effectuer des transformations de jQuery pour sites CSS3 Comment effectuer des transformations de jQuery pour sites CSS3

Il est possible d'utiliser jQuery pour effectuer des transformations et ces transformations sont souvent plus puissant, mais plus facile à utiliser, que les transformations CSS3 indigènes. Cependant, afin d'obtenir cette fonctionnalité, vous…

Comment transformer des objets avec CSS3 Comment transformer des objets avec CSS3

En CSS3, une transformer modifie l'apparence des objets à l'écran d'une manière spécifique. Par exemple, vous pourriez faire pivoter l'objet ou de fausser ses dimensions. Transforme le rendent facile à créer des présentations uniques à…

Comment travailler avec les sélecteurs CSS3 Comment travailler avec les sélecteurs CSS3

À la mi-2010, les concepteurs et les développeurs Web se réjouissaient que CSS3 a commencé à faire son chemin dans le courant dominant. Depuis ce temps, le soutien de navigateur pour CSS3 a régulièrement augmenté et amélioré, même si CSS3…

Comment créer des transformations avec CSS 3 Comment créer des transformations avec CSS 3

CSS 3 vous permet de créer de nombreux effets cool sur votre site pour afficher sur l'iPhone et l'iPad. Les propriétés de transformation CSS 3 vous permettent de transformer un élément pour créer des effets en 2D et 3D. Vous pouvez spécifier…

Assurez CSS 3 travailler dans d'autres navigateurs web Assurez CSS 3 travailler dans d'autres navigateurs web

Si vous souhaitez utiliser HTML5 et CSS 3 dans la conception de votre site Web, vous devez savoir que les deux HTML5 et CSS 3 sont encore en cours de développement. La spécification CSS n'a pas encore été approuvé par le W3C, mais de nombreux…

Comment transformer couches dans Photoshop Elements 9 Comment transformer couches dans Photoshop Elements 9

Lorsque vous travaillez avec des couches dans Photoshop Elements, vous pouvez trouver la nécessité de transformer (échelle ou faire pivoter) certains de vos images. Vous pouvez le faire en appliquant les commandes transformer et Free Transform.…

Comment transformer couches dans Photoshop Elements 11 Comment transformer couches dans Photoshop Elements 11

Lorsque vous travaillez avec plusieurs images dans Photoshop Elements 11, vous avez sans aucun doute à l'échelle, ou même tourner, quelques images pour les adapter à votre composite. Heureusement, Elements rend échelle une corvée facile en…

Comment transformer pixels dans Photoshop Elements 11 sélections Comment transformer pixels dans Photoshop Elements 11 sélections

Vous pouvez constater que vous avez besoin de redimensionner ou réorienter les sélections que vous avez faites dans Photoshop Elements 11. Transformer implique échelle, la rotation, l'inclinaison, de distorsion de retournement, ou d'ajuster la…

» » » » Comment utiliser des transformations CSS3