56 lines
886 B
HTML
56 lines
886 B
HTML
<?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>
|