transform-style css3
16
Siden er opdateret 6. 8. 2013
Egenskaben transform-style fungerer ikke i Internet Explorer, Opera, Chrome og Safari med valid kode. Hvis du foran egenskaben tilføjer den ikke-valide kodestump -webkit- så du ender med -webkit-transform-style: [værdi]; kan også Chrome og Safari også være med.
I html:
<div id="div1">
<div id="div2">HEJ
<div id="div3">BLÅ</div>
</div>
</div>
I css:
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2 {
padding:40px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
#div3 {
padding:40px;
position: absolute;
border: 1px solid black;
background-color: blue;
transform: rotateY(-60deg);
}
... vil se sådan ud:
HEJ
BLÅ
Som det ses er div2 lagt ovenpå div3, selv om den står før i kildekoden og derfor normalt skulle være nederst.
Egenskaben transform-style kan have disse værdier:
- flat
- child-elementet vil ikke blive vist i 3D-position
- preserve-3d
- child-elementet vil blive præsenteret på sin 3D-position
