0 Τρισδιάστατη γραφή mouseover

Φίλοι bloggers, κατά καιρούς βρίσκω όμορφα τρυκ, σε διάφορα sites, και παίρνω τον κώδικα, για τον εφαρμόσω σε κάποιο δικό μου blog...Σήμερα θα σας δώσω ένα κώδικα CSS που έχω εδώ και καιρό στο Cool - Aigio και το κείμενο που βλέπετε γίνεται τρισδιάστατο μόλις περάσει από πάνω ο κέρσορας...Φυσικά οι οδηγίες στο τέλος της ανάρτησης...

ΚΕΙΜΕΝΟ 3d περαστε το ποντικι πανω απο το κειμενο και δειτε το

Ο ΚΩΔΙΚΑΣ CSS:

<style>
#animationWrapper  {
  width:300px;
  font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
  background:none;
  padding:20px;
}

/* link which encapsulates SPANs */
#animationWrapper a {
  font-weight: 200;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.3em;
  margin-bottom: 0px;
  display: block;
  position: relative;
  color: #E58;
  text-decoration: none
}

/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
  -webkit-transition: all 0.12s ease-out;
  -moz-transition: all 0.12s ease-out;
  -o-transition: all 0.12s ease-out;
  -ms-transition: all 0.12s ease-out;
  transition: all 0.12s ease-out;
}

#animationWrapper span {
  display: block;
  color: #FFF;
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* special size for the first item */
#animationWrapper .span1 {
  font-size: 37px;
  line-height: 0.8em;
}

#animationWrapper a:hover {
    color: #fff ;
    top: -3px;
    left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
  color:#fff;
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}
</style>

O ΚΩΔΙΚΑΣ HTML:


<div id="animationWrapper">
  <a target="_blank" href="  ##  ">
    <span class="span1" style="margin-left:-20px;">Cool - Aigio</span>
    <span class="span2" style="margin-left:-20px;">--web-radio--</span>
    <span class="span3" style="margin-left:-20px;">listen to</span>
    <span class="span4" style="margin-left:-20px;">different players</span>
  </a>
</div>

** Το ## αν θέλετε θα το αντικαταστήσετε με ένα link...
**Στα κόκκινα γράμματα βάλτε τα δικά σας κείμενα...
**Μπορείτε να βάλετε και τους 2 κώδικες σε gadget σαν HTML/Javascript
**Στο κώδικα css μπορείτε όσοι ξέρετε να αλλάξετε τα χρώματα και τα μεγέθη των γραμμάτων..
(αν δεν ξέρετε μην το επιχειρήσετε)...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!! (αν σας αρέσουν τέτοια τρυκ, μπορώ να σας παρουσιάσω κι άλλα)