Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 Menu CSS 3  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7 
 Menu cours 3 CSS 3.0  - introduction   / transition linéaire  / transition rotation  / rotation-agrandissement 
/ rotation-zoom  / zoom  / travelling  / déformation 



Cours 3 CSS 3 avec LigneWeb
transition : linéaire et rotation.



 © LigneWeb  ... /introduction au CSS 3.0 : ...
... transition-transformation linéaire-rotation

© design : LigneWeb
© : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb

Formes de transitions
... en CSS 3.0


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Rappel : des sélecteurs pour navigateur.

... des navigateurs ont des ...  sélecteurs spéciaux  ... pour intégrer les nouveaux sélecteurs en CSS3.0 ...
... c'est en attendant la réalisation plus complète du CSS 3.0 ...

... ces sélecteurs vont faire travailler le plugin intégrer dans les navigateurs les plus importants ...
  • ... pour ... Firefox 12 et + ... le sélecteur est ... -moz- ...
  • ... pour ... Safari 5.05 et + ... et pour ... Chrome 17 et + ... le sélecteur est ... -webkit- ...
  • ... pour ... Opéra 11 et + ... le sélecteur est ... -o- ...
  • ... pour ... Explorer ... le sélecteur est ... -ms- ...
  • ... pour ... Linux KDE ... le sélecteur est ... -khtml- ...

  • ... pour ... Opéra : propriété auditive ... le sélecteur est ... -xv- ... (peu utilisé)
... ces sélecteurs sont à placer devant le sélecteur nouveaux du CSS 3.0 ...
... il faudra répéter le sélecteur avec les sélecteurs spéciaux pour que tous puissent lire cette propriété ...
... nous avons donc les navigateurs Safari 4, Firefox 3.6, et d'autres, qui utilisent ces sélecteurs spéciaux ...
... par contre la dernière génération passe à une dimension de plus grande intégration ...
... les navigateurs sont parfois encore en version béta ... mais cela change rapidemment ...

... le nouvel Opéra ... change et est à base Chrome ... avec -webkit- ...
... utilisation des cinq premiers sélecteurs en fonction de l'évolution des Navigateurs ...
... les sélecteurs suivants ne sont utilisés que sur ce site ...

... information sur le ... HTML 5.0 ...  pour les navigateurs sur Wikipedia  ... et leurs plugins ... :
...  Amaya, Gecko, KHTML, Presto, Tasman, Trident, WebKit  ...
... avec, pour l'essentiel : -moz-, -webkit-, -ms-, ... comme sélecteurs spécifiques ...
... -ms- ... pour Explorer qui reste avec Windows 7 encore fort utilisé ...

... nous allons ajouter aux premiers sélecteurs définit plus haut ceux-ci :
  • ...-khtml- ... pour le CSS 2 pour Linux KDE
  • ...-gecko- ... pour le CSS 2 pour Camino · Epiphany · IceCat · Iceweasel · Kazehakase · K-Meleon · Firefox Mobile · Mozilla Firefox · SeaMonkey · TenFourFox · Torpark
  • ...-presto- ... pour le CSS 2 pour Opera Mini · Opera Mobile · Opera Wii · Nintendo DS Browser · Nintendo DSi Browser
  • ...-trident- ... pour le CSS 2 pour Avant Browser · AOL Explorer · Internet Explorer · Internet Explorer Mobile · Maxthon · SlimBrowser · Sleipnir
  • ...-blink- ... pour le CSS 2 pour Arora · Epiphany · Google Chrome · Chromium · iCab · Konqueror · Midori · MixShark · OmniWeb · Opera · rekonq · Safari · Shiira · SRWare Iron · SWK browser · Uzbl · Vespucci · Slimboat · Yandex Browser

Simplification des sélecteurs :



... avec l'évolution des derniers navigateurs qui intègre le CSS 3 ...
... nous avons éliminé certains sélecteurs, ce qui allège l'écriture ...
... pour le CSS 2 déjà ...
... nous le montrons avec les différents exemples sur ce site ...

... sont éliminés : les sélecteurs -o-, -ms-, -khtml-, ...
... mais pas encore totalement pour certaines transformations ...

... et -gecko-, -presto-, -trident-, -blink-, ces derniers ...
... n'étant pas essentiels ...
... nous le voyons dans la feuille de style CSS 2 ...

... -webkit- est par contre gardé pour l'essentiel ...
Zoom



... l'utilisation de ces sélecteurs n'affectent en rien l'affichage même avec des navigateurs plus anciens ...
... ils ne verront pas les effets nouveaux tout simplement ...
... comme pour ce site dont les ombrages, par exemple, ne sont pas vus par tous ...




Introduction :


... les transitions en CSS 3.0 ... sont des transformations du style de blocs ...
... comme le ... changement de couleur , ... le changement de forme , ... la rotation d'un bloc ...
... séparément ou en combinaison ...

... cette propriété porte le nom de ... transition ...
... car elle permet la transition entre deux états stylistiques ...

... la technique de départ de la transition se réalise avec ... le passage de la souris ...
... il faut préciser ... la propriété qui va être transformée ...
... il faut préciser ... la durée ... de l'effet ...
... lorsque la souris s'en va, ... préciser le retour au style de départ ...

... il faut remarquer qu'il y a plusieurs transitions possibles ...
... la transition linéaire et la transition de rotation ...



La transition linéaire.

... un exemple : ...

 ... plaçons la souris sur info en l'y laissant ... 



... avec l'utilisation d'une nouvelle propriété de transition en CSS 3.0 ...
... c'est la transition linéaire ... ( à la même vitesse ) ...
... la souris sur info ... et la transition démarre et reste ...
... la souris retirée ... la transition s'enlève après un certain délais ...
 i
 n
 f
 o

la souris sur info ....... une propriété en css 3.0 qui marche pour les navigateurs ...
... il marche différemment pour Explorer 9 ...

... le code html suivi du code css :

... le code html :
... le code css :
En le réactualisant pour les derniers navigateurs essentiels :

... nous voyons les quatres propriétés qui sont définies ci-dessus ...
... on y adjoint les sélecteurs spécifiques à chaque navigateurs ...
... on remarque aussi les propriétés d'arrondis et d'ombrage du bloc ...
... le bloc 20px X 100px ... devient le bloc 750px X 150px ... (longueur X hauteur) ...

... les propriétés de transition linéaire :

... transition-property: ... avec la largeur ... width ...
... transition-duration: ... avec le temp de ... 2s ... en secondes ...
... transition-timing-function: ... avec le timing de transition ... linear ... ( à la même vitesse ) ...
... transition-delay: ... avec le temp au début de l'action ... 1s ... en secondes ...
... qui sera placé dans ... tablet:hover ...
... transition-delay: ... avec le temp à la fin de l'action ... 5s ... en secondes ...
... qui sera placé avec l'ensemble des données dans ... tablet
... il y a ... transition aller ... et ... transition retour ...
... la première écriture ... est pour le HTML 5 ... lorsque les navigateurs pourrons la lire ...
... les suivantes sont réalisées avec les sélecteurs ... en attendant l'HTML 5 ...



La transition de rotation.

la souris sur info ....... une propriété en css 3.0 qui marche pour les navigateurs ...s
... il marche différemment pour Explorer 9 ...

... un exemple : ...

 ... plaçons la souris sur le carré en l'y laissant ... 

i
n
f
o

... le code html : [ne fonctionne pas avec Explorer]
... le code css :
En le réactualisant pour les derniers navigateurs essentiels :

... les propriétés de transition rotation :

... transition: ... avec la largeur ... width ... et ... height ... en px ...
... transform: ... avec la transformation en durée... 2s ... en secondes ...
... placée dans ... space-r ...
... transform: ... avec la transformation ... rotate(360deg) ... en degré ...
... placée dans ... space-r:hover ...
... il y a ... transition aller ... et ... transition retour ...
... la première écriture ... est pour le HTML 5 ... lorsque les navigateurs pourrons la lire ...
... les suivantes sont réalisées avec les sélecteurs ... en attendant l'HTML 5 ...
... le W3C termine actuellement les implémentations ...
... pour permettre aux navigateurs d'intégrer le HTML 5 et le CSS 3 ...

... un exemple concret :










La transition de rotation
... avec agrandissement.

la souris sur info ....... une propriété en css 3.0 qui marche pour les navigateurs sauf pour Explorer ...

... un exemple : ...

 ... plaçons la souris sur le carré en l'y laissant ... 

 i
 n
 f
 o

... le code html : [fonctionne avec Explorer]
... le code css :
En le réactualisant pour les derniers navigateurs essentiels :

... il y a des images placées en fond ...

... les propriétés de transition rotation ...
... avec agrandissement :

... transition-property: ... avec la largeur ... width ... et ... height ... en px ...
... transition-duration: ... avec le temp de ... 2s ... en secondes ...
... transition-timing-function: ... avec le timing de transition ... linear ... ( à la même vitesse ) ...
... transition-delay: ... avec le temp avant l'action ... 3s ... en secondes ...
... transform: ... avec la transformation ... rotate(360deg) ... en degré ...

... l'agrandissement se fait en agrandissant les mesures du bloc ...
... width passe de 100px à 200px ... et ... height passe de 100px à 200px ...
... pour l'agrandissement d'une image, on utilise l'agrandissement de l'échelle ...
... en passant de scale de valeur 1 à scale de valeur 2 ...
... nous le voyons concrètement dans le point suivant ...

... il y a ... transition aller ... et ... transition retour ...
... la première écriture ... est pour le HTML 5 ... lorsque les navigateurs pourrons la lire ...
... les suivantes sont réalisées avec les sélecteurs ... en attendant l'HTML 5 ...

... ce ne sont que quelques exemples ... on peut complexifier ces propriétés ...

Rotation avec zoom :

... un exemple concret ...
... avec image :

Le logo de LigneWeb
... du CSS 3 : rotation 






... le code html :
... le code css :
En le réactualisant pour les derniers navigateurs essentiels :

... les propriétés de transition rotation avec zoom d'une image :
... transition-property: ... avec la largeur ... width ... et ... height ... en px ...
... transition-duration: ... avec le temp de ... 2s ... en secondes ...
... transition-timing-function: ... avec le timing de transition ... linear ... ( à la même vitesse ) ...
... transition-delay: ... avec le temp avant l'action ... 3s ... en secondes ...
... transform: ... avec la transformation ... scale(2) ... échelle doublée ...
... avec la transformation ... rotate(360deg) ... en degré ...
... avec la transformation ... translate(-50px, -50px) ... pour la situation ...
... pour l'agrandissement d'une image, on utilise l'agrandissement de l'échelle ...
... en passant de scale de valeur 1 à scale de valeur 2 ...


Combinaisons de rotations avec zoom :

... un exemple concret ...
... avec image :

Logo de LigneWeb
  ZOOM-CSS 3     rotation 









... le code html :
... le code css :
En le réactualisant pour les derniers navigateurs essentiels :

... les propriétés de transition rotation avec zoom d'une image :
... nous avons une combinaisons de deux rotations avec zoom avec cette propriété en css 3 ...
... les deux rotations sont contraires : ... 60deg et -60deg ...
... dans ... .tablozi:hover ... nous remarquons deux rotations qui s'opposent ...
... c'est une combinaisons permettant de réaliser un chemin de déplacement spécifique ...
... ce chemin, comme on peut le voir est une courbe ... ce qui n'est pas le cas de zoom ...
... il faut évidemment des contraires égaux ...

... transform:scale(2) rotate(60deg) translate(-25px, 50px) rotate(-60deg); ...



Zoom d'une image :

Le logo de LigneWeb
... du CSS 3 : ... zoom





... on ne met pas la rotation dans le code précédent ...

... le code css :
En le réactualisant pour les derniers navigateurs essentiels :

Travelling d'une image :

Le logo de LigneWeb
... du CSS 3  travelling









... travelling ou zoom inverse ...

... le code css :
En le réactualisant pour les derniers navigateurs essentiels :

... l'échelle scale est de 0.4 ...
... les valeurs ... width:80px; et height:80px; ... sont le lieux d'action de la souris ...
... en fait, ici, c'est l'image de départ qui est le lieu d'action ...



La transition de déformation.

... c'est la forme du bloc, sur lequel se trouve l'image, qui est transformé ...
... pour ce faire, nous utilisons la fonction ... skew ...
... elle est attribuée à la propriété ... transform ...
... pour obtenir cette déformation, on fait pivoter les côtés du bloc ...

... en CSS 3 ... en général :
... un exemple concret :

du CSS 3 
Le logo de LigneWeb
 déformation 

Notre exemple :



... ici nous ajoutons à la transformation la propriété de ... transition ...
... ce qui permet une meilleure transition entre les deux états ...


....autre regard ...

... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple






 Menu CSS 3  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours   CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies