超链接的比例转换不起作用答案

【问题标题】：Scale Transition of a hyperlink doesn't work超链接的比例转换不起作用
【发布时间】：2017-06-14 22:23:21
【问题描述】：

我想对包含在超链接中的图像进行比例转换。所有这些都包含在一个 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>

【问题讨论】：

标签： html css css-transitions css-transforms

【解决方案1】：

它没有按预期工作，因为默认情况下锚元素是inline，并且根据规范，该元素应该是块级或原子内联级元素才能使其成为"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 级别，但是我只是提供了一个为什么它不适用于锚元素的原因。

供参考：

CSS Transforms Module Level 1 - Terminology - Transformable Element

可变形元素是属于以下类别之一的元素：

一个元素，其布局由 CSS 框模型控制，该模型是 block-level 或 atomic inline-level element，或者其 display property 计算为 table-row、table-row-group、table-header-group、table -footer-group、table-cell 或 table-caption

SVG 命名空间中的一个元素，不受具有属性 transform、“patternTransform”或 gradientTransform 的 CSS 框模型的约束。

【讨论】：

【解决方案2】：

您想要缩放和转换图像。

#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>

【讨论】：