Is it possible to position a skewed element absolutely so that its left-bottom corner remains close (0px) to the 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 have indicated with a red line the position of the rectangle side before skewing it. I am trying to find a way to position the rectangle in such a way that its left-bottom corner aligns with the red line without using JavaScript. I cannot simply use 'left: Ypx' because the entire thing will be animated with keyframes (changing skew, rotateX + constant perspective on outer element).
Alternatively, can you suggest another method for creating an animation where pictures slowly "rise" from a lying-on-the-table position?
edit: CODEPEN