CSS: Absolute(?) 定位倾斜元素（无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'，因为整个事情都将是关键帧动画（改变倾斜、rotateX + 外部元素的恒定透视）。

否则，也许你可以建议另一种制作动画的方法：从table位置慢慢'getting up'的图片？

编辑： 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

CSS: Absolute(?) 定位倾斜元素（无JS！重要）

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

css

transform

skew