backface-visibility-hidden-animated-001.html (1364B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility"> 5 <link rel="match" href="backface-visibility-hidden-animated-ref.html"> 6 <style> 7 @keyframes show-backface { 8 0% { transform: rotateY(60deg); } 9 0.01% { transform: rotateY(180deg); } 10 100% { transform: rotateY(180deg); } 11 } 12 13 .flip { 14 animation: 10s linear 0s infinite forwards show-backface; 15 height: 100px; 16 width: 100px; 17 transform: rotateY(60deg); 18 transform-style: preserve-3d; 19 } 20 21 #back { 22 background: lightblue; 23 transform: rotateY(180deg); 24 position: absolute; 25 top: 0; 26 left: 0; 27 width: 200px; 28 height: 200px; 29 backface-visibility: hidden; 30 } 31 32 #posabs { 33 position: absolute; 34 bottom: 0; 35 right: 0; 36 background: yellow; 37 } 38 </style> 39 <div id="flip"> 40 <div id="back"> 41 <i id="posabs">Text</i> 42 </div> 43 </div> 44 <script> 45 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 46 flip.classList.add("flip"); 47 requestAnimationFrame(() => requestAnimationFrame(() => 48 document.documentElement.classList.remove("reftest-wait"))); 49 })); 50 </script> 51 </html>