animate-preserves3d.html (771B)
1 <html> 2 <head> 3 <style type="text/css"> 4 .pad { 5 display: block; 6 height: 20px; 7 } 8 .out { 9 display: block; 10 position: absolute; 11 transform-origin: 0 0; 12 width: 100px; 13 height: 50px; 14 overflow: hidden; 15 } 16 .rect { 17 width: 100px; 18 height: 50px; 19 background-color: grey; 20 } 21 22 .ani { 23 animation: rot 200s linear infinite; 24 animation-timing-function: steps(2, start); 25 transform-origin: 50px 50px; 26 } 27 @keyframes rot { 28 to { transform: translate(200px, 0px); } 29 } 30 </style> 31 </head> 32 <body> 33 <div class="pad"></div> 34 <div class="out ani"> 35 <div class="rect"></div> 36 </div> 37 </body> 38 </html>