Can't make translate3d Z property to work

StackOverflow https://stackoverflow.com/questions/14537562

  •  05-03-2022
  •  | 
  •  

سؤال

I am traying to use:

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

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

هل كانت مفيدة؟

المحلول 2

I was missing -webkit-perspective parameter on the parent element. When I added this it started working just like it should.

نصائح أخرى

According to WebKit Blog ,

translate3d(x, y, z), translateZ(z) Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage.

You'd need anther element to get the effect. I added a few to your code.

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);
}

It seems working and JSFiddle is here.

Frankly, I don't have much knowledge about the translate3d and but recently found some links about CSS3 Transformation while learning CSS3.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top