Question

我有以下内容：

<div id="parent">
    <div id="child"></div>
</div>

#parent {
    width: 400px;
    height: 400px;
    padding: 5px;
    border: 1px solid #ccc;
    position: relative;
}

#parent:hover #child {
    transform: translateX(50px);
}

#child {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

问题是当徘徊在父母身上时，孩子会向下移动一点点。当我只指定translateX（）时为什么孩子会向下移动？

http://codepen.io/anon/pen/jMjJvR

Answer 1

行为正确，因为您正在覆盖transform参数。你必须像

一样组合它们

#parent:hover #child {
    transform: translateX(50px) translateY(-50%);
}

Answer 2

您将以下样式应用于#child。

transform: translate(-50%, -50%);

所以当您使用

为悬停情况应用新样式时

transform: translateX(50px);

你基本上用这个新变换替换原始变换。因此，Y轴上的-50％位移被重置为0;

所以你必须再次在X轴和Y轴上进行平移。

translate(50px, -50%);

这将为您提供所需的结果。

Answer 3

问题是当鼠标悬停在parent css上child更改时，它会覆盖一种样式。即。transform

在#child你有 x和y 的翻译，但是在悬停时你只给出了 x方向，所以孩子重新翻译为它 y方向的旧状态

你可以做到

transform: translateX(50px) translateY(-50%);

或

transform: translate(50px,-50%);

这是工作代码

#parent { width: 400px; height: 400px; padding: 5px; border: 1px solid #ccc; position: relative; } #parent:hover #child { transform: translate(50px,-50%); } #child { width: 100px; height: 100px; background-color: aquamarine; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

<div id="parent"> <div id="child"></div> </div>

以下是工作 Demo

在CSS3中使用transform translateX的奇怪行为？

3 个答案: