Question

我有一个关于使用CSS3比例变换的查询。任何人都可以解释为什么这种缩放变换在Firefox中不起作用（目前使用的是34.0.5），但在Opera中是什么？

HTML：

<a href="#">hover me!</a>

CSS：

a {
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover {
  -webkit-transform: scale(1.5,1.5);
     -moz-transform: scale(1.5,1.5);
      -ms-transform: scale(1.5,1.5);
       -o-transform: scale(1.5,1.5);
          transform: scale(1.5,1.5);
}

>> JSFiddle here <<

Answer 1

将链接设为display: inline-block。

Updated Fiddle

链接是一个内联元素。并且CSS转换不能像mentioned here一样应用于它：

转换适用于可转换元素。

Transformable elements are：

可转换元素是以下类别之一的元素：



一个元素，其布局由CSS框模型控制，该模型是块级或原子内联级元素，或者其显示   property计算到table-row，table-row-group，table-header-group，   table-footer-group，table-cell或table-caption [CSS21]



SVG命名空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或   gradientTransform [SVG11]。

CSS3比例不适用于<a> in Firefox 34.0.5</a>

1 个答案: