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
Valid XHTML og CSS / Copyright © Erik Ginnerskov august 2013
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - transform-style
sidens top
Brugere lige nu: 1
Home Mail