Εικονίδια που περιστρέφονται και σβήνουν/ανάβουν με CSS3

Αυτό είναι ένα πείραμα με CSS3 κι ένα-δυο εφέ. Ο στόχος είναι, όπως λέει και ο τίτλος, χρησιμοποιώντας δύο εικονίδια να εμφανίσουμε με rollover μια το ένα και μια το άλλο με περιστροφή και fade out/fade in.

Στην ουσία, τα δύο εικονίδια βρίσκονται το ένα επάνω στο άλλο, μόνο που το κάτω έχει opacity:0, που στην πορεία γίνεται 1. Καθώς γίνεται το rollover, το πάνω εικονίδιο χάνει όλο του το opacity. Αυτή η αλλαγή γίνεται ομαλά μέσα σε ένα δευτερόλεπτο. Το πέρασμα από τη μία στην άλλη φάση γίνεται με περιστροφή, επίσης σε ένα δευτερόλεπτο.

Δείτε το εφέ στην πράξη

Ο HTML κώδικας είναι:

<h1>
 <a href="#"><span class="logo"><img src="..." alt="" /></span></a>
 <a href="#"><span class="logo_off"><img src="..." alt="" /></span></a>	
</h1>

Ο CSS3 κώδικας έχει περισσότερο ενδιαφέρον:

 h1{
 width: 283px;
 height: 283px;
 -webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;
 position: relative;
 text-align: left;
   }

h1:hover{
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
}

span.logo{
 opacity: 1;
 -webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;   
 position: absolute;
 width: 283px;
 height: 283px;
}

h1:hover span.logo{
 opacity: 0;
}

span.logo_off{
 opacity: 0;
 webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;   
 position: absolute;
 width: 283px;
 height: 283px;        
}

h1:hover span.logo_off{
 opacity: 1;
}

Δείτε το εφέ στην πράξη

Για το h1 δίνουμε το μέγεθος των εικονιδίων και ζητάμε από την περιστροφή (που δηλώνεται στο :hover) να γίνεται μέσα σε ένα δευτερόλεπτο και με γραμμικό τρόπο.

Τα δύο span που έχουμε περιέχουν τα εικονίδια. Γι’ αυτά τους δίνουμε επίσης μια γραμμική μετάβαση ενός δευτερολέπτου, αλλά αυτή τη φορά όχι περιστροφή, αλλά το fade out/fade in.

Αν υπάρχει κάποιος πιο απλός τρόπος (όχι, όχι δε θέλουμε να το κάνουμε με JavaScript) να πετύχουμε το ίδιο εφέ, ευχαρίστως προσθέστε τον στα σχόλια.

UPDATE: Στον Firefox το εφέ σπάει εντελώς, λόγω ενός alignment που λείπει. Για να παίξει κι εκεί, προσθέστε: text-align: left; στο h1.