Arbeitsschritte um das Blättern eines Buches zu simulieren

Rotationen um die y-Achse
1.: Ausgang
Aufbauend beziehe ich mich hier nochmals auf die Beschreibungen von CSS ► Anzeige und Positionierung ► Transformationen. Um ein großes Problem komme ich hier nicht herum. Ich benutze MSIE 11 unter anderem zum Testen. Der zeigt auch nach der Rotation immer die Vorderseite, wenn auch gespiegelt. Für die Rückseite gilt aber unsichtbar! (backface-visibility: hidden ;) Ansicht des Quellcodes	Vorderseite Rückseite
2.: Beispiel ( frei zitiert )
Dass es mit dem MSIE geht, zeigt Jörg Marzinzick an einem Beispiel. Nur - wenn das Objekt um seine linke Kante rotiert werden soll, wird der Effekt wieder ausgehebelt. 56: Kommentierung unwirksam machen, 59: transform: rotateY(0deg) ändern 62: transform: rotateY(-180deg) ändern Generell ist es ein Ansatz, um den MSIE nicht ausschließen zu müssen. Ansicht des Quellcodes	Vorderseite Rückseite
3.: Was macht MSIE 10/11
Das kommt jetzt etwas schräg: Die Rückseite nicht zu verbergen, ist nicht auf das ContainerElement Rückseite bezogen, sondern tatsächlich auf das Attribut backface-visibility:. Nun zeigt auch der MSIE Vorder- und Rückseite. Aber - nur weil keine Füllfarbe background-color: definiert ist. Für den MSIE 11 stellt das eine Sackgasse dar. transform-style: preserve-3d wird nicht unterstützt. Ansicht des Quellcodes	Rückseite Vorderseite
Ich weiß nicht ob das ein Trost sein soll, dass Edge ohne wenn und aber das wieder kann, denn das ist an das Betriebsystem 10 gebunden. Es ist eine Scheiß-Philosophie der systembedingten Brausemacker, nur um ihre kläglichen Millarden Umsätze zu befriedigen. An der Stelle muss ich mich einfach mal wieder aufregen.
4.: erste Schritte zur Simulation
Vier Seiten werden angelegt, um ein Blättern zu simulieren. Noch ist nur vor- und zurückblättern möglich. Ansicht des Quellcodes Um dies über mehrere Seiten zu realisieren, wird nun JavaScript nötig!	inhaltsleer 3 1 2 umblättern
Umblättern von Buchseiten Der Aufbau basiert nun auf zwei feststehenden Seiten und vier rotierenden (im Container id="blaettern"). Eine Paginierung ist den Seiten zugeordnet, muss aber nicht sein. Die Bedingungen, um die Programmierung darauf umzusetzen, lauten: Je nach Richtung des Blätterns wird der darunterliegenden fixen Seite die folgende oder davorliegende Seite zugeordnet. Das Quasi-Blättern erfolgt durch die Rotation. Mit Weiter-Blättern wird die rechte Seite scheinbar geblättert und die dahinterliegende wird nach 90° dann links sichtbar. Für diesen Vorgang müssen die linke und die hinter der linken Seiten befindliche unsichtbar gemacht werden. Sonst kreiselt das Ganze nur. Das wolln mer nich! Um die linke Seite, die ja irgendwann verdeckt wird, aber stehen zulassen, ist die fixe Seite zuständig. Ist die Rotation beendet, wird die rotierte hintere (ehemals linke Seite und nun rechte) wieder zu einer sichtbaren. Wird nun wieder weitergeblättert, wird die folgende Seite untergelegt. Bei aller Mühe: Für dem MSIE habe ich das nicht gebacken bekommen! Dafür kann das der Nachfolger Edge Ansicht des Quellcodes Um das Beispiel besser zu verdeutlichen, versetze ich die fixierten Seiten um deren Höhe von den rotierenden und gebe den unsichtbaren eine Halbtransparenz. geänderte Ansicht des Beispieles zur Demonstration Ohne JavaScript bei mehr als vier Seiten kommt man natürlich nicht aus! Aber CSS3 bewirkt den Eindruck des 3-Dimensionalen.	0

Rotationen um die y-Achse