Позиционирование вертикального элемента внутри повернутого контейнера

Question

Я думаю, что это математический вопрос больше всего на свете, кто знал, что мне нужно знать геометрию для CSS.

У меня вертикальное фоновое изображение внутри повернутого контейнера.Изображение должно идеально накрывать контейнер, а сам контейнер должен быть прикреплен к стене, чтобы пользователь не видел вращение сбоку.Я хочу иметь динамический контроль над размером этого элемента, поэтому я хотел бы, чтобы все было сделано в процентах.

Синяя линия - это "стена".

Поскольку изображение в вертикальном положении, оно должно быть немного больше, чем его контейнер. Я нашел формулу для этого здесь .Вот как это выглядит:

Итак, размеры указаны в процентах, и я не понял, как рассчитать, это различные позиции.Без добавленных значений пикселей это выглядит так:

Так как же рассчитать эти расстояния?

Вот мой CodePen , он в SCSS, вся математика выполняется в коде.

body {
  padding: 2em 5em;
}

.wrapper {
  border-left: 3px solid blue;
}
.wrapper .container {
  opacity: 0.7;
  width: 300px;
  background-color: red;
  border-radius: 0 40px 40px 0;
  overflow: hidden;
  transform: rotate(10deg);
  margin-left: -42px;
}
.wrapper .container .sizing-wrapper {
  width: 100%;
  padding-top: 150%;
  position: relative;
}
.wrapper .container .img {
  position: absolute;
  top: 0;
  left: 0;
  background: url("http://placekitten.com/300/450") no-repeat right top;
  background-size: cover;
  height: 110.0573842629%;
  width: 124.5280657351%;
  transform: rotate(-10deg) ranslateY(-31px) translateX(-32px);
}

<div class="wrapper">
  <div class="container">
    <div class="sizing-wrapper">
      <div class="img"></div>
    </div>
  </div>
</div>

Answer 1

Я поделился своим вопросом на Facebook, и Амит Шин придумала решение, которое я изначально отказался от использования transform-origin.Теперь, когда я видел, как это работает, я не уверен, почему я думал, что это не будет.

Фиксированный CodePen

Чтобы убедиться, что контейнер разрезанстена в нужном месте, нам нужно повернуть ее из верхнего левого угла, используя transform-origin: 0 0.

И нам нужно центрировать изображение внутри контейнера:

  .img {
    top: 50%;
    left: 50%;
    transform: rotate(-$deg) translateY(-50%) translateX(-50%);
    transform-origin: 0 0;
  }

I 'Мне все еще любопытно, каково математическое решение моего вопроса, потому что я уверен, что есть, но для реального использования это, вероятно, лучше ...

body {
  padding: 2em 5em;
}

.wrapper {
  border-left: 3px solid blue;
}
.wrapper .container {
  opacity: 0.7;
  width: 300px;
  background-color: red;
  border-radius: 0 40px 40px 0;
  overflow: hidden;
  transform: rotate(10deg);
  transform-origin: 0 0;
}
.wrapper .sizing-wrapper {
  width: 100%;
  padding-top: 150%;
  position: relative;
}
.wrapper .img {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("http://placekitten.com/300/450") no-repeat right top;
  background-size: cover;
  height: 110.0573842629%;
  width: 124.5280657351%;
  transform: rotate(-10deg) translateY(-50%) translateX(-50%);
  transform-origin: 0 0;
}

<div class="wrapper">
  <div class="container">
    <div class="sizing-wrapper">
      <div class="img"></div>
    </div>
  </div>
</div>