如何将我的 width/height 转换居中?

How to center my width/height transforms?

所以,我试图让图像在悬停时旋转 360 度并放大 1.4,所有图像的中心都保持在原位。我试过这个:

.logo img[data-v-4fbac4e1] {
width: 50px;
height: 50px;
content: url(https://i.imgur.com/txz1IXI.png);
transition: width 2.0s, height 2.0s, transform 2.0s;
}

有了这个:

.logo img[data-v-4fbac4e1]:hover{
    width: 65px;
    height: 65px;
    transform: rotate(360deg);
}

它工作正常,但在扩展时会偏离中心。我如何确保宽度和高度从中心增加以使其保持在同一个位置?对不起,如果这看起来很初级,我是 CSS 的新手。

编辑:我正在使用的 HTML 部分如下所示:

<a data-v-4fbac4e1 href="/home" class="logo">
    <img data-v-4fbac4e1 src="/img/icons/icon.svg">
</a>

如果需要更多,我可以添加它,但这是我要转换的图像的 HTML。

由于我不完全确定您的意思,请指出哪个是您的罪魁祸首,我们会为您解决问题,但这里有一些技术差异的示例。

img, div {
  display: inline-block;
  margin: 1rem;
  height: 10rem;
  width: 10rem;
}

.fancy-img1, .fancy-img3 {
  object-fit: cover;
  outline: red 2px solid;
}

.fancy-img2, .fancy-img4 {
  background: url(https://picsum.photos/200) no-repeat center center / cover;
  outline: blue 2px solid;
}

/* grow by height value change transition */
.fancy-img1 {  
  transition: transform .5s, height .5s;
}

.fancy-img2 {
  transition: transform .5s, height .5s;
}

.fancy-img1:hover, .fancy-img2:hover {
  transform: rotate(360deg);
  height: 15rem;
}

/* Scale with transition */
.fancy-img3 {  
  transition: transform .5s;
}

.fancy-img3:hover {
  transform: scaleY(1.5) rotate(360deg);
}

/* Scale with keyframes */
@keyframes spinGrow {
  to { transform: scaleY(1.5) rotate(360deg); }
}

.fancy-img4:hover {
  animation: spinGrow .5s forwards;
}
<h2>Are you talking about transition height which cause the jumpy effect?</h2>

<img class="fancy-img1" src="https://picsum.photos/200">

<div class="fancy-img2"></div>

<h2>Or actually scale so it remains in its original position?</h2>

<img class="fancy-img3" src="https://picsum.photos/200">

<div class="fancy-img4"></div>