Mit CSS3 lässt sich ein umdrehbarer Hover-Effekt erzielen

/*Grundlegender Stil*/  
html {  
    Schriftfamilie: serifenlos;  
    -ms-text-size-adjust: 100 %;  
    -Webkit-Textgrößenanpassung: 100 %;  
}  
Körper {  
    Rand: 0 automatisch;  
    Textausrichtung: zentriert;  
    Hintergrundfarbe: #FFFFCC;  
}  
ul {  
    Listenstil: keiner;  
    schweben: links;  
    Rand: 0;  
    Polsterung: 0;  
}  
A {  
    Cursor: Zeiger;  
}  
div {  
    Anzeige: Inline-Block;  
    Rand: 40px;  
}  
ul li {  
    Breite: 200px;  
    Höhe: 40px;  
    Zeilenhöhe: 40px;  
    Textausrichtung: zentriert;  
    Rand: 10px;  
    Hintergrundfarbe: #747474;  
    Rahmenradius: 4px;  
    Farbe: weiß;  
}  
Sperre aufheben{  
    Anzeige: Block;  
}  
/*#nav1 Mouseover-Effekt wechselt hin und her*/  
#nav1 ul li {  
    Transformationsstil: 3D bewahren;  
    -WebKit-Transform-Style: 3D bewahren;  
    -ms-transform-style: 3d bewahren;  
    -moz-transform-style: 3d bewahren;  
    Übergang: 0,5 s;  
    -Webkit-Übergang: 0,5 s;  
    -ms-Übergang: 0,5 s;  
    -moz-Übergang: 0,5 s;  
}  
#nav1 ul li:hover {  
    transformieren: verschiebeZ(30px) dreheX(360 Grad) skaliere(1,1);  
    -webkit-transform: verschiebeZ(30px) dreheX(360 Grad) skaliere(1,1);  
    -ms-transform: VerschiebeZ(30px) DreheX(360 Grad) Skalierung(1,1);  
    -moz-transform: verschiebeZ(30px) dreheX(360 Grad) skaliere(1,1);  
}  
/*#nav2 Mauszeiger-Effekt schwebt nach oben*/  
#nav2 ul li {  
    Transformationsstil: 3D bewahren;  
    -WebKit-Transform-Style: 3D bewahren;  
    -ms-transform-style: 3d bewahren;  
    -moz-transform-style: 3d bewahren;  
    Übergang: 0,5 s;  
    -Webkit-Übergang: 0,5 s;  
    -ms-Übergang: 0,5 s;  
    -moz-Übergang: 0,5 s;  
}  
#nav2 ul li:hover {  
    transformieren: translateZ(30px) scale(1.1);  
    -webkit-transform: translateZ(30px) Maßstab(1.1);  
    -ms-transform: translateZ(30px) Maßstab(1.1);  
    -moz-transform: translateZ(30px) Maßstab(1.1);  
}  
/*#nav4 Mauszeiger-Effekt schwebt nach unten*/  
#nav4 ul li {  
    Transformationsstil: 3D bewahren;  
    -WebKit-Transform-Style: 3D bewahren;  
    -ms-transform-style: 3d bewahren;  
    -moz-transform-style: 3d bewahren;  
    Übergang: 0,5 s;  
    -Webkit-Übergang: 0,5 s;  
    -ms-Übergang: 0,5 s;  
    -moz-Übergang: 0,5 s;  
}  
#nav4 ul li:hover {  
    transformieren: translateZ(30px) scale(0.9);  
    -webkit-transform: translateZ(30px) Maßstab(0,9);  
    -ms-transform: translateZ(30px) Skala(0,9);  
    -moz-transform: translateZ(30px) Skala(0,9);  
}  
/*#nav3 Mouseover-Effekt wechselt nach links und rechts*/  
#nav3 ul li {  
    Transformationsstil: 3D bewahren;  
    -WebKit-Transform-Style: 3D bewahren;  
    -ms-transform-style: 3d bewahren;  
    -moz-transform-style: 3d bewahren;  
    Übergang: 0,5 s;  
    -Webkit-Übergang: 0,5 s;  
    -ms-Übergang: 0,5 s;  
    -moz-Übergang: 0,5 s;  
}  
#nav3 ul li:hover {  
    transformieren: verschiebeZ(30px) dreheY(360 Grad) skaliere(1,1);  
    -webkit-transform: verschiebeZ(30px) dreheY(360 Grad) skaliere(1,1);  
    -ms-transform: VerschiebeZ(30px) DreheY(360 Grad) Skalierung(1,1);  
    -moz-transform: verschiebeZ(30px) dreheY(360 Grad) skaliere(1,1);  
}  
/*Button1-Hover-Effekt*/  
btn1 {  
    Hintergrundfarbe: #1AAB8A;  
    Farbe: weiß;  
    Schriftgröße: 18px;  
    Höhe: 60px;  
    Breite: 150px;  
    Rand: 0;  
    Übergang: 800 ms, alles erleichtern;  
    Gliederung: keine;  
    Position: relativ;  
}  
btn1:hover {  
    Hintergrund: #fff;  
    Farbe: #1AAB8A;  
}  
btn1:vorher, .btn1:nachher {  
    Inhalt: '';  
    Position: absolut;  
    Höhe: 2px;  
    Breite: 0;  
    Hintergrund: #1AAB8A;  
    Übergang: 400 ms, alles beschleunigen;  
}  
btn1:vor {  
    rechts: 0;  
    oben: 0;  
}  
btn1:nach {  
    links: 0;  
    unten: 0;  
}  
btn1:hover:vorher, .btn1:hover:nachher {  
    Breite: 100 %;  
    Übergang: 800 ms, alles erleichtern;  
}

<div id="nav1">  
            <p>Vorder- und Rückseite umdrehen</p>  
            <ul>  
                <li>  
                    <a>Startseite</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jQuery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav2">  
            <p>Schweben</p>  
            <ul>  
                <li>  
                    <a>Startseite</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jQuery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav4">  
            <p>Herunterschweben</p>  
            <ul>  
                <li>  
                    <a>Startseite</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jQuery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav3">  
            <p>Nach links und rechts spiegeln</p>  
            <ul>  
                <li>  
                    <a>Startseite</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jQuery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div Klasse="dis-block">  
            <p>Button-Hover-Effekt</p>  
            <button class="btn1" type="button">schweben!</button>  
        </div>