ipkiss ipkiss - 1 month ago 6
CSS Question

Strange behavior with transform translateX in CSS3?

I have the following:

<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%);
}


The issue is when hovering on the parent, the child moves down a little bit. Why the child moves down while I only specified translateX()?

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

Answer

The behavior is correct, as you are overriding the transform parameter. You have to combine them like

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