CSS3 transform：translate3d不影响z轴？ [英] CSS3 transform: translate3d doesn't affect the z-axis?

问题描述

我已执行此程式码片段：

I have this snippet implemented:

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 b
$ b

HTML

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

查看

Check out this Fiddle for the live example.

正如你所看到的，：hover 仅影响 x - 和 y轴上的 .part 。

As you can see, the translation on :hover only affects the .part on the x- and y-axis.

不会在z方向翻译。

知道我在做什么？

推荐答案

忘记添加 -webkit-transform-style：preserve-3d;

这篇关于CSS3 transform：translate3d不影响z轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！