mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 07.07.2020 12:05 Benutzername: Passwort: Auto-Login

Thema: CSS3: Drehung eines Objekts "mit Vorder-/Rückseite" vom 23.09.2012

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS3: Drehung eines Objekts "mit Vorder-/Rückseite"
Autor Nachricht
Marc L
Threadersteller

Dabei seit: 20.06.2006
Ort: Bonn
Alter: 35
Geschlecht: Männlich
Verfasst So 23.09.2012 21:01
Titel

CSS3: Drehung eines Objekts "mit Vorder-/Rückseite"

Antworten mit Zitat Zum Seitenanfang

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&uuml;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 *Schnief*

Hat jemand eine Idee?

Besten Dank vorab Lächel Lächel Lächel


Zuletzt bearbeitet von Smooth-Graphics am Mo 24.09.2012 19:46, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Ähnliche Themen AS - Funktion zum vergrössern eines objekts
Corel R.A.V.E Drehung
Photoshop CS 3 : 3 D drehung?
Hilfe beim abrunden von Linien eines Objekts
[FLASH] Schaltfläche verschwindet bei Drehung - Hilfe
JavaScript / jQuery: Animation / Drehung eines Seils
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.