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 */
}

<><><><>>><>>>>><>>>>>>

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

http://jsfiddle.net/Kriem/H6JZN"rel=“nofollow”>.this Fiddle。

您可以看到,<代码>:hover上的翻译。只影响<条码>、、/strong>和y-axis。

www.un.org/Depts/DGACM/index_spanish.htm 它赢得了Z-direction的笔录。

谁知道我做错了吗?

Answer 1

签字。加入<代码>-webkit-transform-则:保护-3d;

友情链接