css - 无法使 translate3d Z 属性起作用

Question

我正在尝试使用:

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

X 和 Y 属性工作得很好，但是 Z (300px)，就是行不通。这是 jfiddle .我究竟做错了什么？我尝试了 Chrome 24 和 Canary 25感谢您的支持...

Answer 1

根据 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.

您需要另一个元素才能获得效果。我在你的代码中添加了一些。

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 是 here .

坦率地说，我对 translate3d 了解不多，但最近在学习 CSS3 时发现了一些有关 CSS3 Transformation 的链接。

• CSS3 Transformation
• Hardware-Accelerated CSS
• CSS3 3D Transform
• CSS3 Translate3d -Z Value