backface-visibility-hidden-animated-002.html (1485B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@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 /* This is the only difference from backface-visibility-hidden-animated-001.html. */ 35 will-change: transform; 36 bottom: 0; 37 right: 0; 38 background: yellow; 39 } 40 </style> 41 <div id="flip"> 42 <div id="back"> 43 <i id="posabs">Text</i> 44 </div> 45 </div> 46 <script> 47 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 48 flip.classList.add("flip"); 49 requestAnimationFrame(() => requestAnimationFrame(() => 50 document.documentElement.classList.remove("reftest-wait"))); 51 })); 52 </script> 53 </html>