Home/ Questions/Q 8006353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:29:15+00:00

Following simple POC code’s translateZ works on Firefox, but it doesn’t work on Chrome.

  • 0

Following simple POC code’s translateZ works on Firefox, but it doesn’t work on Chrome. The translateX, translateY part works on both browsers. What is wrong with the code? Thanks.

<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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Win XP vs. Win 7 Difference

    There is at least one other who experienced this difference between Win XP and Win 7 regarding translateZ, as this issue report notes (though it was not resolved).

    Whether the difference is a bug or a feature upgrade from a 32-bit to 64-bit system is unclear. In either case, there is probably not a solution you can do through your CSS coding to resolve it.

    • 0