CSS:绝对(?)定位歪斜元素(没有JS !重要)

Question

是否有可能绝对位置倾斜的元素，使其左下角保持接近(0px)容器的边界?

#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>

在倾斜矩形之前，我用红线标出了矩形边的位置。我正在寻找一种方法来定位矩形，所以它的左下角触及红线，不允许JS。我不能简单地使用"left: Ypx"，因为整个东西将是关键帧动画(改变倾斜，旋转x +外部元素的恒定视角)。

否则，也许你可以建议另一种制作动画的方法:从躺在桌子上的位置慢慢"站起来"的图片?

编辑:CODEPEN

Answer 1

您可以使用transform-origin Property。对于您的情况，我将<div id="marker">放在<div id="rect">中，并将transform-origin更改为0% 100%。

看我的例子:

#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>

和这个Working Fiddle