将立式元件放置在旋转容器内

Question

我认为这是一个数学问题，比谁都知道，我知道我需要了解CSS的几何形状。

我在旋转的容器内有一个直立的背景图片。图像必须完美地覆盖容器，并且容器本身需要粘贴到墙上，以使用户看不到侧面的旋转。我想对这个元素的大小进行动态控制，所以我希望所有事情都可以用百分比来完成。

蓝线是“墙”。

由于图像是直立的，因此必须比其容器大很多。 I found the formula for this here。看起来就是这样：

因此尺寸以百分比表示，我还没有弄清楚如何计算各种位置。没有添加的像素值，它看起来像这样：

那么我该如何计算这些距离？

Here is my 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上分享了我的问题，Amit Sheen提出了一个我最初不赞成使用transform-origin的解决方案。现在，我已经看到它可以工作了，现在不知道为什么我认为不会。

The fixed CodePen

要确保容器在正确的位置被墙切割，我们需要使用transform-origin: 0 0从左上角旋转它。

我们需要将图像居中放置在容器中

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

我仍然很好奇我的问题的数学解决方案是什么，因为我敢肯定有一个解决方案，但是对于实际使用来说，这可能更好……

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>