大佬教程收集整理的这篇文章主要介绍了使用perspective,rotateX,rotateY和scale时,CSS转换Webkit中的悬停错误,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用以下CSS:
article { border: 2px solid #cccccc; BACkground-color: #e5e5e5; border-radius: 5px; display: inline-block; height: 150px; margin: 0 2% 32px; position: relative; vertical-align: top; width: 160px; -webkit-BACkface-visibility: hidden; -moz-BACkface-visibility: hidden; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; transform-origin: center; } article:hover { -webkit-transform: perspective(400pX) rotateX(5deg) rotateY(5deg) scale(1.025); -moz-transform: perspective(400pX) rotateX(5deg) rotateY(5deg) scale(1.025); -ms-transform: perspective(400pX) rotateX(5deg) rotateY(5deg) scale(1.025); -o-transform: perspective(400pX) rotateX(5deg) rotateY(5deg) scale(1.025); transform: perspective(400pX) rotateX(5deg) rotateY(5deg) scale(1.025); }
当我悬停文章的左下角时,悬停和变换工作正常.但是,当我将鼠标悬停在右上角时,变换会闪烁,有时甚至根本不会启动.
我在Firefox中没有这些问题.
系统:Mac OSX 10.9.1
适用于:Firefox 26,Firefox Aurora 28,IE10
失败:Chrome 32,Safari 7.0.1,Opera Next 19
希望你们能帮忙!提前致谢
由于您的旋转使元素(特别是右上部)消失(或在屏幕内),因此它们会进入z平面并且不再触发悬停.
您可以解决将它们移向z正面的问题:
-webkit-transform: perspective(400pX) rotateX(5deg) rotateY(5deg) translateZ(10pX) scale(1.025);
要避免悬停状态下的Z移动,请在基本状态下设置相同的Z.
-webkit-transform: perspective(400pX) rotateX(0deg) rotateY(0deg) translateZ(10pX) scale(1);
在使用转换时,以与转换状态相同的方式设置基本转换始终是一个好主意.这就是我设置0deg旋转的原因.
以上是大佬教程为你收集整理的使用perspective,rotateX,rotateY和scale时,CSS转换Webkit中的悬停错误全部内容,希望文章能够帮你解决使用perspective,rotateX,rotateY和scale时,CSS转换Webkit中的悬停错误所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。