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）在x，y和z中移动元素，然后在z中移动元素。正z面向观众。与x和y不同，z值不能是百分比。

你需要花药元素来获得效果。我在你的代码中加了几个。

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的链接。

Answer 2

我在父元素上缺少-webkit-perspective参数。当我添加它时，它开始正常工作。

无法使translate3d Z属性工作

2 个答案: