Question

我有一个正方形，其动画代码为纯html和css。以下是代码的jsbin网址：https://jsbin.com/medupun/edit?html,output

以下是最相关的CSS部分：

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

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

正方形是100px乘100像素。我希望它的变换原点是自己的右上角。我只想用x / y-offset来做这件事。所以我用“-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

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

1 个答案: