超链接的缩放转换不起作用

Question

我想对包含在超链接中的图像进行缩放转换。这一切都包含在一个div中。我写了一些东西，但它不起作用。我需要图像作为超链接，因为它必须将用户重定向到另一个页面。

#logoemailcol {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#logoemailcol:hover #logoem {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

<div id="logoemailcol">
  <a href="" id="logoem" target="_blank">
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;">
  </a>
</div>

Answer 1

您想缩放和转换图像。

#logoemailcol{
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#logoem img {
  transition: all 0.5s;  
}

#logoemailcol:hover #logoem img{
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

<div id="logoemailcol">
   <a href="" id="logoem" target="_blank"><img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;"></a>
</div>

Answer 2

它没有按预期工作，因为默认情况下锚元素是 inline，根据规范，该元素应该是 block-level 或原子 inline-level 元素才能实现它成为 "transformable".

因此您需要将元素的 display 更改为 inline-block 或 block 才能使其按预期工作。这样做时，值 inline-block 将元素呈现为原子 inline-level 元素，因此元素根据定义变为 "transformable"。

Updated Example

#logoemailcol {
  position: relative;
  cursor: pointer;
}
#logoemailcol:hover #logoem {
  transform: scale(1.15);
}
#logoem {
  display: inline-block;
  transition: all 0.5s;
}

<div id="logoemailcol">
  <a href="" id="logoem" target="_blank">
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;">
  </a>
</div>

当然，您也可以将转换应用于父元素，因为它是 block 级别，但是我只是提供了一个原因 为什么 它不是' t 为锚元素工作。

供参考：

CSS Transforms Module Level 1 - Terminology - Transformable Element

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

超链接的缩放转换不起作用

Scale Transition of a hyperlink doesn't work

html

css

css-transitions

css-transforms