Marc L
Threadersteller
Dabei seit: 20.06.2006
Ort: Bonn
Alter: 38
Geschlecht:
|
Verfasst So 23.09.2012 20:01
Titel CSS3: Drehung eines Objekts "mit Vorder-/Rückseite" |
|
|
Hi,
bin vorgestern bei cssmania über die seite http://www.phive.org/phivecoach.php#idcoach=1 gestolpert und hab mich spontan in den Effekt weiter unten verliebt, in dem es 5 Felder gibt, die sich bei hover drehen und eine "Rückseite" offenbaren. Ein sehr schönes Stilmittel, um kurze Infos mit Aha-Effekt zu präsentieren.
Den Effekt würd ich gerne in ähnlicher Weise demnächst auch mal verwenden, steige aber schlicht und ergreifend nicht durch das CSS der Seite durch. Ein kläglicher Versuch, das ganze auf eigene Faust nachzubauen, ist natürlich zum scheitern verurteilt (hier erstmal nur für mozilla):
Code: | <html>
<head>
<style type="text/css">
<!--
#vorne {
width: 300px; height: 200px; background: #ddd; color:blue;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-transition: all .5s ease-in-out;
position:fixed ;
}
#vorne:hover {
-moz-transform: rotateY(180deg);
-moz-backface-visibility: hidden;
}
#hinten {
width: 300px; height: 200px; background: #aaa; color:red;
-moz-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all .5s ease-in-out;
position:fixed ;
}
#hinten:hover {
-moz-transform: rotateX(0deg) rotateY(0deg);
}
-->
</style>
</head>
<body>
<div id="hinten">Und ich bin die Rückseite<br /></div>
<div id="vorne">Ich bin die Vorderseite</div>
</body>
</html> |
Das Problem ist wohl lediglich, dass ein Element vom anderen verdeckt wird und die Maus dann in dieser Zeit, in der das oben liegende Element sichtbar ist, für das unten liegende Element keine Aktion auslöst... krieg ich aber einfach nicht gelöst
Hat jemand eine Idee?
Besten Dank vorab
Zuletzt bearbeitet von Smooth-Graphics am Mo 24.09.2012 18:46, insgesamt 1-mal bearbeitet
|
|