Question

请原谅我糟糕的格式。我试图理解为什么变换比例在Safari中不起作用。

我得到的是四个交替的burgandy和灰色的盒子，我让它们交换颜色并在悬停时放大，以便更清楚哪一个被突出显示。

我一直在使用chrome ver开发。 41.0.2272.89 dev-m我可以看到它在我测试的其他浏览器中工作。（Firefox;和9/10）。

我发现它在同事的狩猎中有些作用，我可以看到按钮放大但动画非常不稳定，不幸的是我没有机会检查他正在使用的版本。

/* background transition */

#block-block-7 .content .four.columns:nth-child(1) a { background:#a20055;}
#block-block-7 .content .four.columns:nth-child(2) a { background:#696a6e;}
#block-block-7 .content .four.columns:nth-child(3) a { background:#a20055;}
#block-block-7 .content .four.columns:nth-child(4) a { background:#696a6e;}
#block-block-7 .content .four.columns a:hover { background:#696a6e; }
#block-block-7 .content .four.columns:nth-child(2) a:hover { background:#a20055;}
#block-block-7 .content .four.columns:nth-child(4) a:hover { background:#a20055;}

/*reduces size before hover to reduce overlaps and enhance effect */

#block-block-7 .content .four.columns a, 
#block-block-7 .content .four.columns a,
#block-block-7 .content .four.columns a, 
#block-block-7 .content .four.columns a  { transform: scale(0.9);
-ms-transform: scale (0.9);
-webkit-transform:scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
}

/*expand on hover */

#block-block-7 .content .four.columns a:hover, 
#block-block-7 .content .four.columns a:hover,
#block-block-7 .content .four.columns a:hover, 
#block-block-7 .content .four.columns a:hover  { transform: scale(1.1);
-ms-transform: scale (1.1);
-webkit-transform:scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}

Answer 1

Scale为webkit-transform指定了两个参数，尝试：

-webkit-transform:scale(0.9, 0.9);

css变换比例在Safari中不起作用

1 个答案: