Css3转换只在规模 [英] Css3 transition on scale only
本文介绍了Css3转换只在规模的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我缺少一些明显的东西。
这是我的代码。 #navigatore-servizi ul li a {
color:#fff;
text-decoration:none;
text-shadow:0 -1px 0#008;
display:block;
width:240px;
height:96px;
background:#000;
background-position:top center;
line-height:96px;
font-family:sans-serif;
text-transform:uppercase;
text-align:center;
-webkit-transition:-moz-transform .3s ease-out;
-moz-transition:-webkit-transform .3s ease-out;
-o-transition:-o-transform .3s ease-out;
transition:transform .3s ease-out;
}
#navigatore-servizi ul li a:hover {
background-position:bottom center;
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
border-right:10px solid#b00;
}
解决方案
/ p>
-webkit-transition:-moz-transform .3s ease-out;
-moz-transition:-webkit-transform .3s ease-out;
已切换。我必须假设这是问题。
I am missing something obvious. But the transition on only one element isn't working here.
Here's my code.
#navigatore-servizi ul li a {
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 #008;
display:block;
width:240px;
height:96px;
background:#000;
background-position: top center;
line-height: 96px;
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
#navigatore-servizi ul li a:hover {
background-position: bottom center;
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
border-right: 10px solid #b00;
}
解决方案
You've got your
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
switched. I have to assume that's the problem.
这篇关于Css3转换只在规模的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文