变换translateX在CSS3中的奇怪行为

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

您对#子元素应用了以下样式。

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

所以当你用

为悬停效果应用新样式时

transform: translateX(50px);

你基本上是用这个新的替换原来的变换。因此Y轴上-50%的位移重置为0;

所以你必须再次平移X轴和Y轴

translate(50px, -50%);

Answer 3

问题是当悬停在parent上时，child的css改变了，它覆盖了一种风格。ie。， 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>

这是工作演示