使用 px 时 CCS3 变换原点不正确答案

【问题标题】：CCS3 transform origin not correct when using px使用 px 时 CCS3 变换原点不正确
【发布时间】：2017-05-21 12:26:44
【问题描述】：

我有一个正方形，它的动画代码是纯 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 是从哪里来的吗？

【问题讨论】：

标签： css transform

【解决方案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

【讨论】：

谢谢！那是罪魁祸首。