CSS'transform:scale()'属性在iOS Safari和iOS Chrome上不起作用
问题描述:
我使用了我的网站的css动画,但它在基于iOS的Safari和Chrome中不起作用。CSS'transform:scale()'属性在iOS Safari和iOS Chrome上不起作用
HTML:
...
<p>
<a href="mywebsite.hu/something1.php">
<img src="picture1.jpg" class="kep" >
</a>
<a href="mywebsite.hu/something2.php">
<img src="picture2.jpg" class="kep" >
</a>
<a href="mywebsite.hu/something3.php">
<img src="picture3.jpg" class="kep" >
</a>
</p>
...
CSS:
img.kep{
transition: transform.1s linear;
-moz-transition: transform.1s linear;
-webkit-transition: transform.1s linear;
}
img.kep:hover{
transform: scale(1.04);
-ms-transform: scale(1.04);
-moz-transform: scale(1.04);
-webkit-transform: scale(1.04);
}
它可以在窗口(IE,Mozilla的浏览器,歌剧,维瓦尔第,Safari浏览器),机器人(浏览器,默认三星Galaxy浏览器)。 但是,在iPad2与iOS 9.2.1(Safari,Chrome)不起作用!
为什么?
答
首先,您应该始终在列表中包含最后一个非前缀属性。 transition
和transform
应低于所有前缀版本。
因此,如果它被支持,它将被用于一个潜在的老前缀版本。
其次,你只是过渡transform
。所以-webkit-transform
不会被改变。你可能是最好的转换all
第三,你没有transform
和.1s
之间的空间。应该是一个空间。
所以我使用这个 - > img.kep {{{0} {0}} {{0}}}}} \t -moz-transition:-moz-transform 1s linear; \t transition:-ms -trans 1s linear; \t转换:变换1s线性; } 或这 - > img.kep { \t -webkit过渡:-webkit变换1S线性; \t -moz-transition:-moz-transform 1s linear; \t -ms-transition:-ms-transform 1s linear; \t转换:变换1s线性; } 还是别的? –
过渡:全1s线性;
@BarbérMáté你明白了吗? –