我一直在使用变换和转换来创建没有Javascript的动画UI组件并且真正享受结果,但我遇到了一个令人不安的问题,似乎是webkit浏览器所独有的.
在我旋转的元素上,只能在元素的右边50%访问跨越元素宽度100%的锚点.
在Firefox中使用-moz-transform不存在此问题,但使用-webkit-transform在Chrome和Safari中都可以100%重现.
这是代码:
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px; …