1483649-1.xhtml (886B)
1 <?xml version="1.0"?> 2 <!DOCTYPE window> 3 4 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 5 6 <style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ 7 #container { 8 position: relative; 9 left: 500px; 10 display: inline; 11 } 12 13 #first { 14 position: relative; 15 top: 0px; 16 left: 0px; 17 width: 100px; 18 height: 100px; 19 transform: scaleX(-1); 20 background: red; 21 } 22 23 #second { 24 position: relative; 25 top: 50px; 26 left: -100px; 27 width: 100px; 28 height: 100px; 29 overflow: hidden; 30 } 31 32 @keyframes transform-animation { 33 from { 34 transform: scaleX(-1); 35 } 36 to { 37 transform: scaleX(-1); 38 } 39 } 40 41 #transformed { 42 width: 50px; 43 height: 50px; 44 animation-name: transform-animation; 45 animation-fill-mode: forwards; 46 } 47 48 ]]></style> 49 50 <box id="container"> 51 <box id="first"></box> 52 <box id="second"> 53 <image id="transformed"/> 54 </box> 55 </box> 56 </window>