perspective-transforms-equivalence-ref.html (814B)
1 <!doctype HTML> 2 <meta charset="utf8"> 3 <title>Perspective with transforms equivalencies.</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 5 <style> 6 7 #container { 8 transform: translate(-200px, -200px); 9 width: 500px; 10 height: 500px; 11 perspective: 500px; 12 } 13 14 #container > div { 15 width: 100%; 16 height: 100%; 17 transform-style: preserve-3d; 18 transform: translateZ(-250px) rotateZ(45deg); 19 } 20 21 #container > div > div { 22 width: 100%; 23 height: 100%; 24 position: absolute; 25 background-color: rgba(3, 121, 255, 0.3); 26 box-sizing: border-box; 27 border: 3px solid black; 28 } 29 30 #one { transform: rotateY(90deg) translateZ(250px); } 31 </style> 32 33 <div id="container"> 34 <div> 35 <div id="one"></div> 36 <div id="one"></div> 37 <div id="one"></div> 38 <div id="one"></div> 39 </div> 40 </div>