Is it possible to actually implement red blue 3D effect in CSS?

Question

Today, StackOverflow introduced filters for April fools, and one of them creates a 3D glasses effect. I happened to have red-blue 3D glasses at hand, but then I realized that the red and blue colors are reversed. We can verify it in the filtering code:

body.theme-custom.theme-3d h1, body.theme-custom.theme-3d h2, body.theme-custom.theme-3d h3, body.theme-custom.theme-3d h4, body.theme-custom.theme-3d h5, body.theme-custom.theme-3d h6, body.theme-custom.theme-3d p, body.theme-custom.theme-3d a, body.theme-custom.theme-3d li, body.theme-custom.theme-3d span, body.theme-custom.theme-3d label, body.theme-custom.theme-3d button, body.theme-custom.theme-3d div, body.theme-custom.theme-3d input, body.theme-custom.theme-3d select, body.theme-custom.theme-3d textarea, body.theme-custom.theme-3d ::before, body.theme-custom.theme-3d ::after {
  text-overflow: clip;
  letter-spacing: 3px;
  text-shadow: -3px 0 1px cyan,3px 0 1px red;
}

To achieve 3D effect, the red part of the glasses on the left filters out red parts of the image, which is usually on the left, which allows us to only perceive the blue picture on the right. The blue part of the glasses works similarly on the right. It is the differences in the distance of the perceived images that enables the 3D effect.

Trying to achieve actual 3D effect with the filter, I tried to reverse the blue and red shadows:

body.theme-custom.theme-3d h1, body.theme-custom.theme-3d h2, body.theme-custom.theme-3d h3, body.theme-custom.theme-3d h4, body.theme-custom.theme-3d h5, body.theme-custom.theme-3d h6, body.theme-custom.theme-3d p, body.theme-custom.theme-3d a, body.theme-custom.theme-3d li, body.theme-custom.theme-3d span, body.theme-custom.theme-3d label, body.theme-custom.theme-3d button, body.theme-custom.theme-3d div, body.theme-custom.theme-3d input, body.theme-custom.theme-3d select, body.theme-custom.theme-3d textarea, body.theme-custom.theme-3d ::before, body.theme-custom.theme-3d ::after {
  text-overflow: clip;
  letter-spacing: 3px;
  text-shadow: -3px 0 1px red, 3px 0 1px cyan;
}

After the change, the order of the colors should be correct, but still two shadows of the text are appearing for each eye. This is probably due to the original text still displaying in its original color, which I then removed:

body.theme-custom.theme-3d h1, body.theme-custom.theme-3d h2, body.theme-custom.theme-3d h3, body.theme-custom.theme-3d h4, body.theme-custom.theme-3d h5, body.theme-custom.theme-3d h6, body.theme-custom.theme-3d p, body.theme-custom.theme-3d a, body.theme-custom.theme-3d li, body.theme-custom.theme-3d span, body.theme-custom.theme-3d label, body.theme-custom.theme-3d button, body.theme-custom.theme-3d div, body.theme-custom.theme-3d input, body.theme-custom.theme-3d select, body.theme-custom.theme-3d textarea, body.theme-custom.theme-3d ::before, body.theme-custom.theme-3d ::after {
  text-overflow: clip;
  letter-spacing: 3px;
  text-shadow: -3px 0 1px red, 3px 0 1px cyan;
  color: transparent;
}

This creates the effect below:

Even though the shadows of the text disappears and the two opposite colors combines into one with a pair of 3D glasses, there are still practically no 3D effect--if every line of text appears in the same depth, then it is practically equivalent to them appearing just at the normal depth.

However, due to the structure of how this CSS class is applied, it must apply the same depth to all elements that contains text, and all characters in one line of text. Is it possible to implement 3D effect with different depth for different parts of the text in CSS? For example, making the text closer to the center of the screen appear closer to the viewer, or making the text around the screen appear further?