Recently, the HTML5 demo on the Apple official website added a 3D album, which represents that safari5 became the first browser to implement 3D effects with css3. It can be seen that the Web3D era is just around the corner.
Css3 3D Gallery
This article mainly introduces CSS 3 styles for 3D effects in safari5 (all other WebKit kernel browsers as of do not support 3D effects ).
1,-WebKit-Perspective(3D perspective attributes)
This attribute can be used to convert a plane image to a 3D image with a prospective perspective effect. This attribute can only generate 3D images for its child elements, without affecting the content of its node.
Code instance
Code
<HTML>
<Head>
<Meta name = "viewport" content = "user-scalable = No, width = device-width"/>
<Title> setting the perspective </title>
</Head>
<Body>
<Div style = "font-size: 200%; margin: 1em 1em;-WebKit-perspective: 500;">
I have perspective.
<Div style = "height: 6em; width: 6em; text-align: center; Background-color: yellow;-WebKit-transform: rotatey (40deg);">
I'm 3D.
</Div>
</Div>
</Body>
</Html>
Use-WebKit-perspective before and after comparison
2,-WebKit-transform-style
This attribute is used to indicate the rendering method (flat or preserve-3d) of nested elements in 3D space. If flat (default) is used, all child node elements will no longer have 3D Effects
It is worth noting that if the 3D node tree you build is behind the ancestor element, it may not be displayed. To avoid this situation, ensure that the-WebKit-transform-style attribute of the ancestor node is set to preserve-3d, and the default value is flat.
In addition, nodes with overflow set to Den den cannot render the 3D effect normally, and the rendering will follow the flat mode.
Code instance
Code
<Div style = "font-size: 200%; margin: 1em 1em;-WebKit-perspective: 500;">
<Div style = "height: 8em; width: 6em; text-align: center; Background-color: yellow;-WebKit-transform-style: preserve-3d;-WebKit-transform: rotatey (40deg); ">
I am the parent, and have perspective.
<Div style = "-WebKit-transform: translatez (3em); background-color: Blue;">
I stand out from my parent element.
</Div>
</Div>
</Div>
Code instance outermost Div has no-WebKit-perspective attribute, use-WebKit-transform-style: effect when preserve-3d
Code instance outermost Div uses the-WebKit-perspective attribute while using-WebKit-transform-style: Effects of preserve-3d
Reference: http://developer.apple.com/safari/library/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Transforms/Transforms.html