Geek Answers Handbook

Why is "-webkit-transform-style: preserve-3d;" make some divs disappear?

The following code should display the title bar, footer and image, but for some reason, as soon as I add .div1 { -webkit-transform-style: preserve-3d; } .div1 { -webkit-transform-style: preserve-3d; } , I get only the title bar. I know that it seems to have unnecessary divs and styles, but I need them for the effects that I removed to make debugging easier. My page code:

 <html> <head> <title></title> <style> body { margin: 0px; } .div1 { -webkit-transform-style: preserve-3d; } .div2 { position: absolute; width: 100%; height: 100%; } img { max-width: 50%; max-height: 50%; display: block; } .footer { position: fixed; bottom : 0px; } </style> </head> <body> <div class="div1"> <div class="div2"> <div class="header"> Header </div> <div class="imgdiv"> <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/5/18/1337331092888/Cwm-Idwal-Snowdonia.-Mich-007.jpg"> </div> <div class="footer"> Footer </div> </div> </div> </body> </html>
+7
source share
2 answers

I think the problem here is similar to the well-known behavior, in which position: absolute / fixed div, which does not have a specific height / width, can often disappear. In your case, the 3D canvas searches for <div class="div1"> to have a certain width, otherwise it just floats aimlessly in space, because you gave it properties that use a three-dimensional canvas, and I believe that indirectly calls it Do not expand to contain child divs.

In any case, you can see that determining the height and width for the element with preserve-3d fixes the problem in the JS script: http://jsfiddle.net/nY9v6/

+11
source

good sample

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-transform-style.html

-3
source

More articles:


All Articles