CSS: Абсолютное (?) Позиционирование перекошенного элемента (без JS! Важно)

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

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

изменить: CODEPEN


css transform skew
person oboer    schedule 24.10.2016    source источник
comment
Если у кого-то была подобная проблема, нашел простое решение: transform-origin: слева внизу. на элементе, который претерпевает преобразование (в моем примере - #rect).   -  person oboer    schedule 24.10.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать свойство 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>

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

person Zeev Katz    schedule 24.10.2016
comment
Узнал за 3 мин до того, как опубликовал свой ответ (см. Комментарий выше). Тем не менее, это простое решение, и я предлагаю вам одно. :) - person oboer; 24.10.2016