一个关于CSS3里 transform:rotate的问题。 100
<body><divclass="rotate">ROTATE</div></body></html><styletype="text/css">.rotate{heig...
<body>
<div class="rotate">ROTATE</div>
</body>
</html>
<style type="text/css">
.rotate {
height:60px;
width:200px;
background:#333;
transform:perspective(1000px);
transition:transform 0.5s ease;
-webkit-transform:perspective(1000px);
-webkit-transition:-webkit-transform 0.5s ease;
/*文本样式*/
color:#FFF;
letter-spacing:5px;
text-transform:uppercase;
text-align:center;
line-height:60px;
}
.rotate:hover {
transform:rotateX(90deg);
-webkit-transform:rotateX(90deg);
}
代码在此，一个DIV绕X轴90度转动的鼠标经过效果，在火狐正常，但是在chrome浏览器里，鼠标只有放在DIV class="rotate"的下半截才会生效，放在DIV的上半部没效果。。求问这是什么原因。 展开
<div class="rotate">ROTATE</div>
</body>
</html>
<style type="text/css">
.rotate {
height:60px;
width:200px;
background:#333;
transform:perspective(1000px);
transition:transform 0.5s ease;
-webkit-transform:perspective(1000px);
-webkit-transition:-webkit-transform 0.5s ease;
/*文本样式*/
color:#FFF;
letter-spacing:5px;
text-transform:uppercase;
text-align:center;
line-height:60px;
}
.rotate:hover {
transform:rotateX(90deg);
-webkit-transform:rotateX(90deg);
}
代码在此，一个DIV绕X轴90度转动的鼠标经过效果，在火狐正常，但是在chrome浏览器里，鼠标只有放在DIV class="rotate"的下半截才会生效，放在DIV的上半部没效果。。求问这是什么原因。 展开
1个回答
展开全部
你不用用假HOVER加了hover和你的transform就差异了
你可以直接
@-moz-keyframes rotate {0% {background: #333;}
50% {background: #333;-moz-transform: scaleY(0);transform: scaleY(0);}
50.1% {-moz-transform: scaleY(0);transform: scaleY(0);background: #FFF;}
100% {background: #FFF;-moz-transform: scaleY(1);transform: scaleY(1);}角度你可以直接慢慢调试
追问
之前是用chromium浏览器试的。。换了chrome不知道怎么又没问题了- -看来chromium虽然是chrome的库 但是支持不一样啊。。总之没问题了。。
追答
一般chrome是浏览器里最兼容的一款浏览器了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
