backface-visibility-hidden-animated-ref.html (768B)
1 <!doctype html> 2 <html> 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 <style> 6 #flip { 7 height: 100px; 8 width: 100px; 9 transform: rotateY(180deg); 10 transform-style: preserve-3d; 11 } 12 13 #back { 14 background: lightblue; 15 transform: rotateY(180deg); 16 position: absolute; 17 top: 0; 18 left: 0; 19 width: 200px; 20 height: 200px; 21 backface-visibility: hidden; 22 } 23 24 #posabs { 25 position: absolute; 26 bottom: 0; 27 right: 0; 28 background: yellow; 29 } 30 </style> 31 <div id="flip"> 32 <div id="back"> 33 <i id="posabs">Text</i> 34 </div> 35 </div> 36 </html>