6

我正在使用：

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

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

4

2 回答 2

3

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

于 2013-01-27T14:04:22.847 回答
3

根据WebKit 博客，

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 在这里。

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

于 2013-01-26T15:14:27.797 回答