Question

我有以下问题。当我使用transform设置CSS转换（在悬停时translateZ），奇怪的事情开始发生。如果你只是悬停在元素上它按预期工作，但当你开始快速开始和关闭时（快速连续），变换开始打破并且效果成倍增加（在正变换Z的情况下，元素将移动＆＃34 ;离你越近越近，即使它在不久之后又回到了指定的位置。）

以下是代码，HTML：

<div id="wrapper">
    <ul>
        <li></li>
    </ul>
</div>

和CSS：

#wrapper {
    perspective: 2000px;
}

ul li {
    width: 200px;
    height: 40px;
    background: #0160ad;
    transition: all 0.3s linear;
}

ul li:hover {
    -webkit-transform: perspective(2000) translateZ(300px);
}

所以我在这里做错了，或者只是它的方式，并且必须采取其他方式来防止这种情况发生。

fiddle

Answer 1

当您转换某些内容时，在两种状态下设置属性始终是个好主意。并且，与posible类似（保持未使用的属性相同）。

所以，设置

ul li {
    width: 200px;
    height: 40px;
    background: #0160ad;
    transition: all 0.3s linear;
    -webkit-transform: perspective(2000) translateZ(0px);
}

ul li:hover {
    -webkit-transform: perspective(2000) translateZ(300px);
}

它运作正常：fiddle

CSS转换是否会破坏转换属性（悬停时）？

1 个答案: