My understanding is that changing the transform property on DOM elements should be fast, since it won't force layout or repainting. But things seem a bit sluggish, and profiling points towards changing transform as the culprit.

I have this code which updates the DOM element of a particle per its properties:

const applyCSSToParticle = (particle) => {
  const { elem, x, y, z, rot } = particle

  elem.style.transform =
    'translateX(' +
    x +
    'px) translateY(' +
    y +
    'px) rotate(' +
    rot +
    'deg) scale(' +
    z +
    ')'
}

And it's called by this function:

const applyPhysics = () => {
  requestAnimationFrame(applyPhysics)
  particles.forEach((particle, i) => {
    const { id, elem, text, x, y, z, xVel, yVel, zVel, rot, rVel } = particle

    particle.x += xVel * z
    particle.y += yVel * z
    particle.z = Math.min(z + zVel, maxZ)
    particle.rot += rVel
    applyCSSToParticle(particle)
  })

When I profile my code, I'm seeing that about 30% of the time is spent in applyCSSToParticle(). Any ideas on how to speed this up?