Problema de perspectiva de WebKit móvil

Question

Un DIV rotativo 3D corta otro DIV con un índice Z más alto, sin importar el índice Z δ o la diferencia de perspectiva. Esto funciona bien en Safari, Safari Mobile en iOS 4, pero en iOS 5 puedo ver el problema

http://jsfiddle.net/voidbrain/cuhn5/7/embedded/result/

Answer 1

La división de "cinta" que se está cortando es esencialmente en la posición 0 en el eje z. Para que el otro div gire a lo largo del eje Y, debe empujar la "cinta" div en el eje z por una distancia al menos la mitad del ancho del div giratorio. Por ejemplo, si el DIV giratorio tiene un ancho de 100px, aplique el siguiente CSS al DIV "Cinta":

-Webkit-transform: traduce3D (0, 0, 50px)