CSS3變換：translate3d不會影響z軸？

Question

我有這樣的片段實施：

CSS

div 
{ 
    position:absolute; 
    -webkit-transition: all 0.3s ease-out; 
} 
.block 
{ 
    background:#fc0; /* YELLOW */ 
    top:50px; 
    left:50px; 
    width:80px; 
    height:40px; 
    -webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,30deg); 
} 
.block .part 
{ 
    background:#444; /* GREY */ 
    width:inherit; 
    height:inherit; 
    -webkit-transform: translate3d(0,0,50px); 
} 
.block:hover .part 
{ 
    -webkit-transform: translate3d(10px,10px,20px); /* ONLY TRANSFORMS X & Y */ 
} 

HTML

<div class="block"> 
    <div class="part"></div> 
</div> 

退房this Fiddle的活生生的例子。

正如你所看到的，在:hover平移隻影響在X-和y軸的.part。

它不會在z方向上平移。

任何知道我在做什麼錯的人？

Answer 1

明白了。忘記添加-webkit-transform-style: preserve-3d;