CSS: Absolute(?) positioning skewed element (no JS !important) - css

Question

Is it possible to absolute position skewed element so its left-bottom corner stay close (0px) to container's border?
#one{
position:absolute;
background-color:darkkhaki;
width:800px;
height:200px;
left:50%;
transform: translateX(-50%)
}
#rect{
position:absolute;
background-color: salmon;
width:400px;
height:200px;
left:50%;
transform: translateX(-50%) skew(-25deg);
}
#marker{
position:absolute;
background-color:red;
width:5px;
height:200px;
left: 200px;
}
<div id="one">
<div id="rect"></div>
<div id="marker"></div>
<div>
I've marked with red line position of the rectangle side before skewing it. I'm looking for a way to position the rectangle, so its left-bottom corner touches the red line and no JS allowed.
I cannot simply use 'left: Ypx', because the whole thing is going to be keyframes-animated (changing skew, rotateX + constant perspective on outer element).
Otherwise, maybe you can suggest another way for making animation: the pictures that are slowly 'getting up' from laying-on-the-table position?
edit:
CODEPEN

Answer 1

You can use transform-origin Property.
For yours case i put <div id="marker"> inside <div id="rect"> and change transform-origin to 0% 100%.
Look at my example:
#one{
position:absolute;
background-color:darkkhaki;
width:800px;
height:200px;
left:50%;
transform: translateX(-50%)
}
#rect{
position:absolute;
background-color: salmon;
width:400px;
height:200px;
left:50%;
transform: translateX(-50%) skew(-25deg);
}
#marker{
position:absolute;
background-color:red;
width:5px;
height:200px;
top: 0px;
left: 0px;
transform: skew(25deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
<div id="one">
<div id="rect">
<div id="marker"></div>
</div>
<div>
And this Working Fiddle