ipkiss ipkiss - 3 months ago 35
CSS Question

Strange behavior with transform translateX in CSS3?

I have the following:

<div id="parent">
<div id="child"></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()?



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