Positioning Upright Element Inside Rotated Container

Question

I think this is a math question more than anything else, who knew I'd need to know geometry for CSS.

I have an upright background image inside a rotated container. The image has to cover the container perfectly, and the container itself needs be stuck to the wall so that the user doesn't see the rotation on the side. I want to have dynamic control over the sizing of this element, so I would like everything to be done with percentages.

The blue line is the "wall".

Since the image is upright it has to be quite a bit bigger than its container. I found the formula for this here. That's what it looks like:

So the dimensions are in percentages, what I haven't figured out how to calculate is the various positionings. Without the pixel values I added it looks like this:

So how do I calculate these distances?

Here is my CodePen, it's in SCSS, all the math is done in the code.

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

I shared my question on Facebook and Amit Sheen came up with a solution I initially dismissed of using transform-origin. Now that I've seen it work I'm not sure why I thought it wouldn't.

The fixed CodePen

To make sure the container is cut by the wall at the right place we need to rotate it from the top left corner by using transform-origin: 0 0.

And we need to center the image inside the container:

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

I'm still curious what the mathematical solution to my question is, because I'm sure there is one, but for actual use this is probably better...

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>