<?xml version="1.0"?> <!DOCTYPE window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ #container { position: relative; left: 500px; display: inline; } #first { position: relative; top: 0px; left: 0px; width: 100px; height: 100px; transform: scaleX(-1); background: red; } #second { position: relative; top: 50px; left: -100px; width: 100px; height: 100px; overflow: hidden; } @keyframes transform-animation { from { transform: scaleX(-1); } to { transform: scaleX(-1); } } #transformed { width: 50px; height: 50px; animation-name: transform-animation; animation-fill-mode: forwards; } ]]></style> <box id="container"> <box id="first"></box> <box id="second"> <image id="transformed"/> </box> </box> </window>