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

Question

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

Jsfiddle

#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

它没有按预期工作，因为默认情况下 anchor 元素是 inline 并且根据规范，该元素应该是 block 级或原子级内联元素才能使其成为 "transformable" .

因此，您需要将元素的 display 更改为 inline-block 或 block 才能使其按预期工作。这样做时，值 inline-block 将元素呈现为 atomic inline-level element ，因此元素根据定义变为 "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 级别，但是我只是提供了一个关于为什么它不起作用的原因为 anchor 元素。

供引用:

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.