Wartość flat jest domyślną wartością właściwości transform-style.
Domyślnie elementy dzieci elementu HTML nie znajdują się w tej samej perspektywie co ich element rodzic.
transform-style:flat;
Element "div#dziecko" nie znajduje się w tej samej perspektywie co przykładowy element "div#rodzic".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#rodzic {
transform:perspective(300px) rotateY(10deg);
text-align:center;
width:250px;
height:250px;
margin:0 auto;
font-size:1.3em;
background-color:#7DCDE8;
}
#dziecko {
transform:rotateY(-20deg);
height:200px;
background-color:#F00;
}
</style>
</head>
<body>
<div id="rodzic">div#rodzic
<div id="dziecko">div#dziecko</div>
</div>
</body>
</html>
Za pomocą wartości preserve-3d właściwości transform-style możemy sprawić, że elementy dzieci interesującego nas elementu HTML znajdą się w tej samej perspektywie co ich element rodzic.
transform-style:preserve-3d;
Element "div#dziecko" znajduje się w tej samej perspektywie co przykładowy element "div#rodzic", ponieważ do wspomnianego elementu "div#rodzic" została dodana właściwość "transform-style" wraz z wartością "preserve-3d".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#rodzic {
transform:perspective(300px) rotateY(10deg);
transform-style:preserve-3d;
text-align:center;
width:250px;
height:250px;
margin:0 auto;
font-size:1.3em;
background-color:#7DCDE8;
}
#dziecko {
transform:rotateY(-20deg);
height:200px;
background-color:#F00;
}
</style>
</head>
<body>
<div id="rodzic">div#rodzic
<div id="dziecko">div#dziecko</div>
</div>
</body>
</html>
