CSS3 Multiple Transforms: translate() and scale()

Question

I found out how to apply multiple transforms with How to apply multiple transforms in CSS? but I am wondering how I can control them a bit better.

#box {
  width: 100px;
  height: 100px;
  font-family: "Arial";
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
  border-radius: 25%;
  transition: 0.5s ease-in-out;
}
            
#box:hover {
  transform: scale(2, 2) translate(25px, 25px);
}

<div id="box">Text</div>

The animation starts with the scale() before the translate() starts to kick in. Strangely enough, I can't seem to swap the translate() and scale() around as it will scale but won't translate when I do it.

How do I alter this so that the top and left of the div does not move up and left? I want both transforms to start together so you don't get the appearance of the div moving up and left to start with.

score 2 · Accepted Answer · edited Jun 12 '18 at 10:19

How do I alter this so that the top and left of the div does not move up and left?

You stop moving it around in the first place … and specify where you want the origin of the transformation(s) to be instead:

#box {
  width: 100px;
  height: 100px;
  font-family: "Arial";
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
  border-radius: 25%;
  transition: 0.5s ease-in-out;
  transform-origin: top left; /* add this in */
}
            
#box:hover {
  transform: scale(2, 2); /* no translate here */
}

<div id="box">Text</div>

CSS3 Multiple Transforms: translate() and scale()

1 Answers1