我有一个正方形,它的动画代码由纯 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 是从哪里来的?
最佳答案
您的正方形上有填充,添加了 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);
}
关于css - 使用 px 时 CCS3 变换原点不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44093036/