在不改变元素位置的情况下变换倾斜

Question

我使用 CSS 倾斜变换创建了以下标记（演示示例）：

.wrapper {
  height: 100px;
  width: 200px;
  position: relative;
  background-color: orange;
}
.inner {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: skew(30deg);
  background-color: blue;
  opacity: .7;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

问题是内部 div .inner 位于容器 .wrapper 之外，即使我将 right 设置为 0 因为内部 [=30] =] 倾斜 30 度。我怎样才能定位内部 div 最右边的部分在同一位置？我可以对 right 的值进行硬编码，但它会随着屏幕尺寸的不同而不同。如果我把外面div的溢出设为隐藏，右边还是会错位。我看到建议使用 transform-origin 和 -webkit-transform-origin，我将其设置为 right，但 none 的解决方案有效。我能做什么？

Answer 1

Skew 将变换 div，在本例中为 X 方向，类似于平移。这是我在 codepen 中使用倾斜和翻译所做的测试。这是我添加的内容：

    .inner {
    width: 50%;
    height: 100%;
    position: absolute;
    transform: skew(30deg) translateX(71.5px);
    background-color: blue;
    opacity: .7;
    }

Answer 2

你需要transform-origin: bottom

.wrapper {
  height: 100px;
  width: 200px;
  position: relative;
  background-color: orange;
}
.inner {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: skew(30deg);
  transform-origin: bottom;
  background-color: blue;
  opacity: .7;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

在不改变元素位置的情况下变换倾斜

Transform skew without changing element position

html

css

position

skew

css-transforms