Animated Expand/Collapse SVG Icon

I was adding an expand/collapse feature to my website code blocks the other day, and I wanted to create an animation where the arrows flip vertically when you press the button.

To accomplish this effect, I used the transform-origin and transform-box properties to make the transform centered on the path elements so they would flip properly.

path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 15ms cubic-bezier(0.4, 0, 0.2, 1);
}

Then I simply applied a rotateX(180deg) transform to flip the arrows when the button was clicked.

path.flip {
  transform: rotateX(180deg);
}