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

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