1

遵循简单的 POC 代码的 translateZ 在 Firefox 上有效，但在 Chrome 上无效。translateX, translateY 部分适用于两种浏览器。代码有什么问题？谢谢。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <style type="text/css">
        @-webkit-keyframes test1KeyFrames{
            from{
                -webkit-transform: translateZ(0px) translateY(0px) translateX(0px);
            }
            to{
                -webkit-transform: translateZ(-1000px) translateY(100px) translateX(100px);
            }
        }

        @-moz-keyframes mozTest1KeyFrames{
            from{
                -moz-transform: translateZ(0px) translateY(0px) translateX(0px);
            }
            to{
                -moz-transform: translateZ(-1000px) translateY(100px) translateX(100px);
            }
        }

        .test1{
             -webkit-transform-origin: 50% 50%;
             -webkit-transform-style:preserve-3d;
             -webkit-animation-name: test1KeyFrames;    
             -webkit-animation-duration: 5s;
             -webkit-animation-direction: normal;
             -webkit-animation-timing-function: ease-out; /*cubic-bezier(0.16,0.74,0.22,-0.15);*/
             -webkit-backface-visibility: visible;
        }

        .mozTest1{
             -moz-transform-origin: 50% 50%;
             -moz-transform-style:preserve-3d;
             -moz-animation-name: mozTest1KeyFrames;    
             -moz-animation-duration: 5s;
             -moz-animation-direction: normal;
             -moz-animation-timing-function: ease-out; /*cubic-bezier(0.16,0.74,0.22,-0.15);*/
             -moz-backface-visibility: visible;
        }
    </style>
</head>
<body>
    <div style="border:1px solid red; -webkit-perspective: 100px; -webkit-perspective-origin:240px 140px; -webkit-transform-style:preserve-3d; -moz-perspective: 100px; -moz-perspective-origin:240px 140px; -moz-transform-style:preserve-3d;" >
        <div id="slider1" class="mozTest1 test1" style="border:2px solid blue; width:480px; height:280px; background:url(img3.jpg)">                
        </div>

        <image src="img1.jpg" class="test1 mozTest1"/>

        <p class="test1 mozTest1">Hello world</p>
    </div>

</body>

4

1 回答 1

2

Win XP 与 Win 7 的区别

至少有其他人在 Win XP 和 Win 7 之间经历了这种差异translateZ，正如本问题报告所指出的（尽管它没有解决）。

区别是错误还是从 32 位系统升级到 64 位系统的功能尚不清楚。无论哪种情况，您都可能无法通过 CSS 编码来解决它。

于 2012-05-29T09:24:08.843 回答