如何将我的 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>
所以,我试图让图像在悬停时旋转 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>