Css Chrome和Firefox中的3D变换(rotateY)的反应确实不同
我在我的页面标题中为logo div创建了一个CSS三维转换。悬停时,徽标会旋转。在Chrome中,一切看起来都很好,但Firefox呈现出完全不同的效果 我将变换原点移动到logo div的左侧。旋转div的右侧时,会“压缩”以获得视觉3D效果。在Firefox中,logo div只会变小,但不会“压缩”,而且你看不到3D效果 守则:Css Chrome和Firefox中的3D变换(rotateY)的反应确实不同,css,css-transforms,Css,Css Transforms,我在我的页面标题中为logo div创建了一个CSS三维转换。悬停时,徽标会旋转。在Chrome中,一切看起来都很好,但Firefox呈现出完全不同的效果 我将变换原点移动到logo div的左侧。旋转div的右侧时,会“压缩”以获得视觉3D效果。在Firefox中,logo div只会变小,但不会“压缩”,而且你看不到3D效果 守则: <!doctype html> <html lang="de"> <head> <meta charset="
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>test</title>
<style>
#header {
width: 940px;
margin: auto;
background-color: blue;
height: 350px;
position: relative;
-webkit-perspective: 800;
-moz-perspective: 800;
}
#logo {
width: 300px;
height: 80px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
-webkit-transition-duration: 0.25s;
-webkit-transform-origin: 0% 50%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotate3d(0,1,0,0deg);
-moz-transition-duration: 0.25s;
-moz-transform-origin: 0% 50%;
-moz-transform-style: preserve-3d;
-moz-transform: rotate3d(0,1,0,0deg);
}
#logo:hover {
-webkit-transition-duration: 0.5s;
-webkit-transform: rotate3d(0,1,0,45deg);
-moz-transition-duration: 0.5s;
-moz-transform: rotate3d(0,1,0,45deg);
}
</style>
</head>
<body>
<div id="header">
<div id="logo"></div>
</div>
</body>
</html>
测试
#标题{
宽度:940px;
保证金:自动;
背景颜色:蓝色;
高度:350px;
位置:相对位置;
-webkit透视图:800;
-莫兹观点:800;
}
#标志{
宽度:300px;
高度:80px;
背景色:红色;
位置:绝对位置;
顶部:50px;
左:0px;
-webkit转换持续时间:0.25s;
-webkit转换来源:0%50%;
-webkit变换样式:保留-3d;
-webkit变换:旋转3D(0,1,0,0度);
-moz转换持续时间:0.25s;
-moz变换原点:0%50%;
-moz变换样式:preserve-3d;
-莫兹变换:旋转3d(0,1,0,0度);
}
#标志:悬停{
-webkit转换持续时间:0.5s;
-webkit变换:旋转3D(0,1,0,45度);
-moz转换持续时间:0.5s;
-莫兹变换:旋转3d(0,1,0,45度);
}
请尝试以下JSFIDLE:
你知道我做错了什么吗?除了使用CSS3 3D转换并期望跨浏览器获得一致的结果之外,你没有做错任何事情。Firefox不会像Chrome那样扭曲图像以产生深度错觉。只需在css代码的(-moz perspective:800px;)行中添加“px”