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

WinXPとWin7の違い

この問題レポートtranslateZに記載されているように、WinXPとWin7の間にこの違いを経験した人が少なくとも1人います（解決されていませんが）。

違いがバグなのか、32ビットシステムから64ビットシステムへの機能アップグレードなのかは不明です。どちらの場合でも、CSSコーディングを介して解決できる解決策はおそらくありません。

于 2012-05-29T09:24:08.843 に答える