preserve3d-scale.html (1557B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 svg{ 5 display: block; 6 margin: auto; 7 -webkit-transform-origin: top center; 8 -webkit-transform: scale(1.5); 9 } 10 #cube{ 11 position: absolute; 12 left: 25px; 13 top: 25px; 14 width: 74px; 15 height: 74px; 16 backface-visibility: visible; 17 -webkit-transform-style: preserve-3d; 18 -webkit-transform-origin: center center; 19 -webkit-backface-visibility: visible; 20 -webkit-transform: rotateX(-45deg) rotateY(50deg); 21 -webkit-transition: -webkit-transform 1s; 22 } 23 24 .side{ 25 position: absolute; 26 top: 0; 27 left: 0; 28 width: 74px; 29 height: 74px; 30 backface-visibility: visible; 31 -webkit-transform-origin: center center; 32 -webkit-backface-visibility: visible; 33 } 34 35 #cube .side:nth-child(1) { 36 -webkit-transform: translateY(37px) rotateX(90deg); 37 transform: translateY(37px) rotateX(90deg); 38 } 39 40 #cube .side:nth-child(2) { 41 -webkit-transform: translateY(-37px) rotateX(-90deg); 42 transform: translateY(-37px) rotateX(-90deg); 43 44 } 45 </style> 46 </head> 47 <body> 48 <div id="cube"> 49 <svg class="side" width="100px" height="100px"> 50 <rect fill="#DAD6CC" width="74" height="74"></rect> 51 <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle> 52 <g> 53 </g> 54 </svg> 55 <svg class="side" width="100px" height="100px"> 56 <rect fill="#DAD6CC" width="74" height="74"></rect> 57 <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle> 58 <g> 59 </g> 60 </svg> 61 62 </div> 63 </body></html>