[CSS] TranslateZ en browser of coding issues

[Milmoor]

Ik ben bezig een CSS flip te maken waarbij ik de schijn van diepte aan mijn te draaien object geef. Dit wil ik doen door twee vlakken op X pixels van elkaar te zetten met aan de zijkant 90 graden geroteerd een :front of :back element. Alleen heeft IE er geen zin in. Daar is alles zo plat als een dubbeltje. In Chrome en Firefox werkt de 3D TranslateZ wel gewoon. Daarom heb ik een JSFidle gemaakt waar (nagenoeg) alleen relevante code in zit.

Zie hier: http://jsfiddle.net/Milmoor/8nHa9/. Deze laat in Firefox netjes rode en groen vlak zien, geroteerd zodat je kan zien dat er afstand tussen zit, met bovenaan twee blauwe balken van de :front en de :back van het groene vlak. In IE10 zit er geen afstand tussen de vlakken. In Chrome werkt de JSFidle totaal niet. Er is niets geroteerd. In mijn originele website kan ik wel roteren. Blijkbaar een JSFidle issue in combinatie met Chrome.

Wat zie ik over het hoofd? Of ligt dit aan de browsers?

[C0rnelis]

FYI: je plaatst nu een link naar een javascriptbestand in de javascriptbox op jsfiddle. Die box werkt als een <script>-container: je mag daar dus alleen javascript intypen en geen links naar javascriptbestanden.

Je kunt in het linkerpaneel onder External resources de url toevoegen en je jsfiddle updaten. Het werkt dan wel degelijk in Chrome

Verder kan je op http://caniuse.com/#search=transform lezen dat IE inderdaad geen volledige ondersteuning heeft van CSS 3d:

Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

Wanneer je die rule bij alle elementen weghaalt zie ik exact het IE-resultaat ook in bijv. Chrome.

En

quote: http://msdn.microsoft.com..._transform_style_property

Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

Via stackoverflow kom je dan weer uit op http://stackoverflow.com/...in-preserve-3d-workaround, die naar een werkend voorbeeld linkt op http://cssdeck.com/labs/gddxuzki, die je in je eigen code kunt verwerken.

[ Voor 69% gewijzigd door C0rnelis op 06-04-2014 11:56 ]

[Milmoor]

Goede tips. Ik heb wat te puzzelen. Ik ben deze IE problematiek ook tegen gekomen, maar omdat de 3D flip wel werkt zou ik verwachten dat het met de translateZ ook goed gaat. Ik heb alle 3D effecten zover ik weet naar de children doorgeschoven. Blijkbaar zie ik nog wat over het hoofd.

[C0rnelis]

Ik kan verder ook niets meer zeggen behalve dat het ook in Chrome plat wordt weergegeven wanneer je de transform: preserve-3d uitzet op .item en de rest ongemoeid laat, dus het lijkt me niet direct een probleem met translateZ, maar echt een issue met deze CSS-rule in IE10.

[Milmoor]

Na wat testwerk: het zit in de :before en :after. IE (b)lijkt daar de transforms op te negeren. Zie dit voorbeeld: http://dl.dropboxusercont...agboek/Layered3Dflip.html. Webkit en Firefox zijn het ook niet eens over de details, maar de basis werkt tenminste. Ik zet deze nog over naar de Fidle, maar dat lukt vandaag niet meer.

[Milmoor]

Zucht, ik snap het niet. Ik werk nu zonder pseudo elements. De volgende fiddle werkt in Chrome en Firefox, maar niet in IE: http://jsfiddle.net/XRdEn/2/. Ik zou verwachten dat doordat de transformatie op :hover voor .item en voor img een andere transformZ heeft dan .front er wat 3D effect zou ontstaan.