css - 使用 px 时 CCS3 变换原点不正确

Question

我有一个正方形，它的动画代码由纯 html 和 css 组成。这是代码的 jsbin url:https://jsbin.com/medupun/edit?html,output

下面是最相关的 CSS 部分:

.foo {
    height: 100px;
    width: 100px;
    -webkit-transform-origin: 100px 0%;
}

.foo:hover {
  -webkit-transform: rotate(-180deg);
}

正方形为 100 像素 x 100 像素。我希望它的变换原点是本身的右上角。我正在寻求仅使用 x/y 偏移量来完成此操作。所以我使用“-webkit-transform-origin: 100px 0%;”。

但是，我看到正方形并没有围绕右上角旋转，而是靠近它的一个点。令我惊讶的是，如果我将原点更改为 130px 0%，它将起作用。

谁能帮我理解额外的 30px 是从哪里来的？

Answer 1

您的正方形上有填充，添加了 30px。

  padding: 1em;

删除它以获得您正在寻找的结果。

 .foo {
      position: absolute;
      top: 400px;
      left: 400px;
      height: 100px;
      width: 100px;
      text-align: center;
      background: #ffea61;
      -webkit-transition: all 750ms ease-in-out;
      -webkit-transform-origin: 100px 0;
    }

    .foo:hover {
      -webkit-transform: rotate(-180deg);
    }

https://jsbin.com/zovucefuxi/edit?html,output