Transform-style and Perspective attributes, transform-style
transform-styleThe syntax of attributes is very simple:transform-style: flat | preserve-3d
flatThe default value indicates that all child elements are displayed on the 2D plane.
preserve-3dIt indicates that all child elements are rendered in 3D space.
transform-styleThe attribute must be set in the parent element and higher than any nested deformation element. Finally, we use a flip example to deepentransform-styleAttribute impressions
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> transform-style 3D effect test </title>
<Style>
* {Font-size: 14px; color: # fff; padding: 0; margin: 0 ;}
# Container {
Position: relative;
Height: 300px;
Width: 300px;
-Webkit-perspective: 500;
Margin-top: 200px;
Margin-right: auto;
Margin-left: auto;
}
# Parent {
Margin: 10px;
Width: 280px;
Height: 280px;
Background-color: #666;
Opacity: 0.8;
-Webkit-transform-style: preserve-3d;
}
# Parent> div {
Position: absolute;
Top: 40px;
Left: 40px;
Width: 280px;
Height: 200px;
Padding: 10px;
-Webkit-box-sizing: border-box;
}
# Parent>: first-child {
Background-color: #000;
-Webkit-transform: translateZ (-100px) rotateY (45deg );
}
# Parent>: last-child {
Background-color: #333;
-Webkit-transform: translateZ (50px) rotateX (20deg );
-Webkit-transform-origin: 50% top;
}
/* Execute the 360-degree rotation animation on the Y axis */
</Style>
</Head>
<Body>
<Div id = "container">
<Div id = "parent"> 1
<Div> <a href = "/"> 2 </a> </div>
<Div> <a href = "/"> 3 </a> </div>
</Div>
</Div>
</Body>
</Html>
Yes:-webkit-transform-style: preserve-3d;
-Webkit-transform-style: preserve-3d;
Perspective: it is a space perspective distance problem that is easy to understand and set in the parent element.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
