Geek asks and answers

Unable to get translate3d Z to work

I try to use:

 -webkit-transform: translate3d(0,500px,300px);

Properties X and Y work fine, but Z (300px) just doesn't work. Here is jfiddle . What am I doing wrong? I tried both Chrome 24 and Canary 25 Thanks for your support ...

+5
source share
2 answers

I was missing the -webkit-perspective parameter of the parent element. When I added this, it started working as it should.

+3
source

According to WebKit Blog ,

translate3d (x, y, z), translateZ (z) Move the element to x, y and z, and just move the element to z. Positive z is aimed at the viewer. Unlike x and y, z cannot be a percentage.

. .

HTML

<div class="coin1">
    <div class="coin2"></div>
</div>

CSS

.coin1{
    position:absolute;
    top:50px;
    left:50px;
    width:80px;
    height:40px;
    background:#fc0;
    -webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,30deg);
    -webkit-transform-style: preserve-3d;
}

.coin1 .coin2
{
    background:#444;
    width:inherit;
    height:inherit;
    -webkit-transform: translate3d(0,0,150px);
}

, JSFiddle .

, translate3d, CSS3 CSS3.

+3

More articles:


All Articles