split-intersect2.html (810B)
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 intersect 2</title> 8 9 <style> 10 .container { 11 margin: 0 0; 12 width: 400px; 13 height: 400px; 14 15 transform-style: preserve-3d; 16 } 17 18 .shape { 19 margin: 0 0; 20 position: absolute; 21 22 width: 30px; 23 height: 100px; 24 } 25 26 .red { 27 background-color: rgba(255,0,0,1); 28 transform: translate(100px, 100px) rotateZ(90deg) rotateY(60deg); 29 } 30 31 .green { 32 background-color: rgba(0,255,0,1); 33 transform: translate(80px, 100px); 34 } 35 36 .blue { 37 background-color: rgba(0,0,255,1); 38 transform: translate(120px, 100px); 39 } 40 </style> 41 </head> 42 43 <body> 44 <div class="container"> 45 <div class="shape red"></div> 46 <div class="shape green"></div> 47 <div class="shape blue"></div> 48 </div> 49 </body> 50 </html>