Bild dreht bei hover und zeigt den Hintergrund





Quellcode
<html>
<head>

<style type="text/css">
.logo {height: 500px; width: 500px;perspective: 1500; float: left; margin: 0 1em;}
.logo:hover .turnaround {transform: rotateY(180deg); }
.logo .front {background: url(../Bilder/W-Ovoice.jpg) 0 0 no-repeat;}
.logo .back {background: url(../Bilder/W-hdil.jpg) 0 0 no-repeat; }
.turnaround { transition: .5s ; transform-style: preserve-3d; position: relative;height: 100%;}
.front,
.back {backface-visibility: hidden; position: absolute;width: 100%;height: 100%;}
.front { z-index: 2; }
</style>
<head>

<body >
<center><div class="logo">
<div class="turnaround">
<div class="front"></div>
<div class="back"></div>
</div>
</div></center>
</body>
</html>