CSS: абсолютное (?) смещение позиционирования элемента (без JS !важно)

#css #transform #skew

#css #преобразование #искажение

Вопрос:

Возможно ли абсолютное позиционирование искаженного элемента, чтобы его левый нижний угол оставался близко (0 пикселей) к границе контейнера?

 #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’, потому что все это будет анимированными ключевыми кадрами (изменение наклона, поворот постоянная перспектива внешнего элемента).

В противном случае, может быть, вы можете предложить другой способ создания анимации: картинки, которые медленно «поднимаются» из положения «лежать на столе»?

редактировать: CODEPEN

1. Если у кого-то была подобная проблема, нашел простое решение: «преобразовать-начало координат: внизу слева». для элемента, который подвергается преобразованию (#rect в моем примере).

Ответ №1:

Вы можете использовать свойство transform-origin. Для вашего случая я помещаю <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>

И эта рабочая скрипка