CODEWITHSUNDEEP
css
codeplay
codeplay

Reputation: 610

CSS3 translateZ doesn't work for chrome?

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>

Upvotes: 1

Views: 5848

Answers (1)

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 2

Related Questions