css3动画效果
.transition{
     -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
这里我只想对transform属性生效如下：
-webkit-transform: translatex(20px);
需要怎么写啊？下面的写法没有生效啊！
 -webkit-transition: transform .5s ease;
回复讨论(解决方案) -webkit-transform
也要类似写法吧
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* ie 9 */
-webkit-transform: translate(50px,100px); /* safari and chrome */
-o-transform: translate(50px,100px); /* opera */
-moz-transform: translate(50px,100px); /* firefox */
}
你似乎需要一个触发事件
css3 ie兼容代码在线转换 ie's css3 transforms translator
演示代码
.trans { width: 100px; height: 100px; background-color: yellow;}.trans:hover {/* w3c css3 standard */ transform: translatex(20px); /* firefox */ -moz-transform: translatex(20px); /* webkit (chrome, safari, mobile browsers, etc) */ -webkit-transform: translatex(20px); /* opera */ -o-transform: translatex(20px); /* ie>=9 */ -ms-transform: translatex(20px); /* ie8+ - must be on one line, unfortunately */ -ms-filter: progid:dximagetransform.microsoft.matrix(m11=1, m12=0, m21=0, m22=1, sizingmethod='auto expand'); /* ie6 and 7 */ filter: progid:dximagetransform.microsoft.matrix( m11=1, m12=0, m21=0, m22=1, sizingmethod='auto expand'); /* * to make the transform-origin be the middle of * the object. note: these numbers * are approximations. for more accurate results, * use internet explorer with this tool. */ margin-left: 7px; margin-top: -3px; }
演示更新版
加上了transition