Transformation 2D

Voici quelques exemples de transformation au passage de la souris

Elles parlent toutes seules sur toutes les manipulations dont on a toujours révées.

Entrons dans le vif du Sujet

Working Draft CSS3 ie9+mzchromeoperasafari
I scale : changement d'échelle

La propriété "transform" n'est prise en charge qu'avec préfixe, mais fonctionne sur tous les derniers navigateurs. Seuls Safari et Chrome prennent en charge les transformations 3D.

Il peut être décomposé en scaleX et scaleY

Exemple

Working Draft CSS3 ie9+mzchromeoperasafari
II rotate

Exemple

Working Draft CSS3 ie9+mzchromeoperasafari
III translate

Exemple

Working Draft CSS3 ie9+mzchromeoperasafari
IV skew : oblique (Maths : affinité)

Exemple
Référence CSS3

skewX ( a ) définit une inclinaison selon l'axe des X

Un point M(x,y) est transformé en M'(x . tan(a), y)
http://www.w3.org/TR/SVG/coords.html#SkewXDefined

Webographie

http://youmightnotneedjs.com/

https://www.youtube.com/watch?v=QYQ0I1mvFDE

https://envato.com/blog/pure-css-animation-snippets/

A développer :

http://codepen.io/plfstr/full/cgsGH

Form Validation

 

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

https://developer.cdn.mozilla.net/media/uploads/demos/n/i/nikesh/hover-effect/demo_package/index.html

Voilà un trombisnoscope fluide écrit uniquement en CSS : trombinoscope.html , étudier son source

Ajouter les rotations en X Y ou Z nécessaires avec transition pour obtenir les effets dont voici quelques clichés instantannées :


Demander le corrigé à votre enseignant, il est déjà écrit.

Reconstruire les effets de la page http://www.unisciel.fr