程序员的知识教程库

网站首页 > 教程分享 正文

CSS3——transform:Rotate(90deg) 出现Bug

henian88 2024-08-16 17:35:53 教程分享 6 ℃ 0 评论

transform:rotate(90deg) 之后鼠标无法触摸或者是触摸之后又断开,一直断断续续的,使用css的hover或者是JS的mouseenter事件会执行多次导致一卡一卡的。解决方法是改为89即可。

使用 rotateX(90deg) 会出现Bug

div:{
 height:84px;
 width:100px;
 background:red;
 transform-style:preserve-3d;
 transition: .4s;
 transform-origin: center;
 prespective:10000px;
 transform: rotateX(0deg) translateZ(0);
}
div:hover{
 transform: rotateX(90deg) translateZ(0);
}

效果图

上面的效果是会一直抖动,使用JS事件的mouseenter 会一直执行,正常的话一会执行一次

把90改为89即可

div:hover{
 transform: rotateX(86deg) translateZ(0);
}

效果图

现在不会抖动了,JS事件也正常了

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表