split-non-ortho1.html (754B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <meta charset="utf-8"> 7 <title>Split non-orthogonal 1</title> 8 9 <style> 10 .container { 11 margin: 0 0; 12 width: 400px; 13 height: 400px; 14 15 position: absolute; 16 transform-style: preserve-3d; 17 } 18 19 .shape { 20 margin: 0 0; 21 position: absolute; 22 } 23 24 .first { 25 background-color: rgba(255,0,0,1); 26 27 width: 100px; 28 height: 100px; 29 30 top: 50px; 31 left: 50px; 32 } 33 34 .second { 35 background-color: rgba(0,255,0,1); 36 37 width: 150px; 38 height: 150px; 39 40 top: 50px; 41 left: 50px; 42 43 transform: rotateZ(45deg) rotateY(0.1deg); 44 } 45 </style> 46 </head> 47 48 <body> 49 <div class="container"> 50 <div class="shape second"></div> 51 <div class="shape first"></div> 52 </div> 53 </body> 54 </html>