Test des propriétés CSS extraordinaires de Safari !
Cela faisait un petit temps que je voulais tester -webkit-transform et -webkit-transition, deux propriétés CSS qui fonctionnent exclusivement avec Safari (et son moteur de rendu WebKit) mais qui augurent de bonnes choses pour l’avenir du Web.
Sans plus attendre, voyez l’exemple qui vous démontrera les extraordinaires capacités de ces deux propriétés CSS (je rappelle que ça ne fonctionne qu’avec les dernières versions de Safari).
La première propriété CSS utilisée est -webkit-transform. On peut la voir à l’oeuvre quand la souris passe sur la photo :
#kelly:hover {
-webkit-transform: scale(1.5) rotate(360deg) skew(10deg);
}
* scale permet de zoomer sur la photo. Ici, on zoome à 150%.
* rotate permet de faire une rotation sur l’image. Ici, on fait une rotation de 360°, c’est à dire un tour complet.
* skew permet de biaiser l’image et prend un angle en argument (10° ici). En chipotant un peu, cela pourrait servir à faire de la 3D…
Je ne l’ai pas fait ici mais il est également possible de faire des translations via translate.
-webkit-transition permet d’animer tout ça :
#kelly {
(...)
-webkit-transition: all 0.5s ease-in;
}
Elle nécessite trois arguments :
* la propriété sur laquelle porte la transition. Ici, la transition porte sur toutes les propriétés mais j’aurais très bien pu remplacer all par -webkit-transform.
* la durée de la transition en secondes.
* le type de transition (linear, ease-in, etc.)
Inspirations :
* CSS Transforms sur Surfin’ Safari
* CSS Animation sur Surfin’ Safari