Survoler à l’aide de votre souris pour voir le résultat – Code HTML…
|
1 2 3 4 5 |
<div class="rotate"> <div><img src="images/logo_248-64.png" width="248" height="64" alt="logo" /></div> |
Code CSS…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* Effet sur Logo par Webinnov */ /* Rotate & Scale */ .rotate { float: left; width:250px; background-color:#FFF; border: 1px solid #333; margin-right: auto; margin-left: 15px; margin-top: 10px; padding: 2px; border-radius: 10px; -webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out; -webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset; -moz-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset; box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .rotate:hover { -webkit--box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset; -moz-box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset; box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset; -webkit-transform : scale(1.1) rotate(-3deg); -moz-transform : scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); -o-transform : scale(1.1) rotate(-3deg); transform : scale(1.1) rotate(-3deg); -webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out; cursor:url(https://blog.webinnov.fr/news/2013-05-31/rotate_inv/images/loupe.png), auto; } |
David LAURENT
Aucun commentaire