présentations transf. base.2

Pour compléter mes articles sur les animations désormais possibles sur Firefox, un petit complément.
Je vous encourage à rechercher des infos plus techniques sur le net car de nombreuses possibilités sont permises mais quel intérêt présentent-elles pour chacun de nous, dans la câdre de son utilisation blog...?

D'autres réglages généraux possibles mais dont l'intérêt pour les blogs est à définir par chacun: la rotation et la distorsion,  tout en sachant que l'on peut mettre plusieurs animations à la suite et c'est là que la temporisation individuelle devient intéressante.
D'abord, le code de celui du déplacement et changement de bordure ci-contre.
<p class="truc" style="width: 100px; height: 50px; float: left; text-align: center;"> l'article dont la bordure change au survol.</p>
<style type="text/css"><!--
.truc {
   border: 2px solid blue;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
}
.truc:hover {
   border:5px solid red;
   -webkit-transform: translate(10px, 10px) ;
   -moz-transform: translate(10px, 10px);
--></style>..

 

l'article dont la bordure change au survol.

avec rotation:
<p class="chose" style="width: 100px; height: 50px; float: left; text-align: center; border: 2px solid blue;"> l'article dont la bordure change au survol.</p>
<style type="text/css"><!--
.chose {
     -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
}
.chose:hover {
   -webkit-transform: translate(10px, 10px) rotate(45deg);
   -moz-transform: translate(10px, 10px) rotate(45deg);
--></style>

avec rotation.

avec rotation 2: une variante en modifiant le point de rotation.
<p class="bidule" style="width: 100px; height: 50px; float: left; text-align: center; border: 2px solid blue;"> l'article dont la bordure change au survol.</p>
<style type="text/css"><!--
.bidule {
     -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
     -moz-transform-origin: -40px 25px; }
.bidule:hover {
   -webkit-transform: translate(10px, 10px) rotate(45deg);
   -moz-transform: translate(10px, 10px) rotate(45deg);
--></style>

avec rotation.

Avec distorsion
<p class="untel" style="width: 100px; height: 50px; float: left; text-align: center; border: 2px solid blue;"> l'article dont la bordure change au survol.</p>
  <style type="text/css"><!--
.untel {
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
}
.untel:hover {
  
   -webkit-transform: translate(10px, 10px) skew(20deg);
   -moz-transform: translate(10px, 10px) skew(20deg);
--></style>

avec distorsion.

Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés