To understand the why we need to perform some math.

If we start with the `invert(1)` (the easiest one) we will use `f(x) = (255 - x)`<sup>[ref][1]</sup>. So 
`rgb(255,0,0)` will become `rgb(0,255,255)`

For the `hue-rotate(180deg)` it more complex. Considering [the specification][2] we will get the following matrix:

    -0.574  1.43  0.144
     0.426  0.43  0.144
     0.426  1.43 -0.856

So we will have

    R' =  -0.574*R  1.43*G  0.144*B = 1.43*255 + 0.144*255 = 401.37
    G' =   0.426*R  0.43*G  0.144*B = 0.43*255 + 0.144*255 = 146.37
    B' =   0.426*R  1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37

Then a final color `rgb(255,146.37,146.37)` which is not a red one

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    html {
      background: rgb(255, 146.37, 146.37)
    }

<!-- end snippet -->


---

>what can be done to use CSS to invert an image and still have red look like red?

It depends on what result you want to get considering the other colors but you can add a `staturate()` filter to get back your red color:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    img {
     filter: invert(1) hue-rotate(180deg) saturate(10);
    }

<!-- language: lang-html -->

    <img src="https://i.sstatic.net/jikdT.png">

<!-- end snippet -->

Again some Math to understand what is happening. From the same specification and after some simplication we will have the following matrix:

     7.87  -7.15 -0.72
    -2.13   2.85 -0.72
    -2.13  -7.15  9.28

So

     R' =  7.87*R  -7.15*G -0.72*B =  7.87*255 - 7.87*146.37 = bigger than 255
     G' = -2.13*R   2.85*G -0.72*B = -2.13*255 + 2.13*146.37 = negative
     B' = -2.13*R  -7.15*G  9.28*B = -2.13*255 + 2.13*146.37 = negative

A final color `rgb(255,0,0)`


  [1]: https://stackoverflow.com/a/48798480/8620333
  [2]: https://drafts.fxtf.org/filter-effects/#feColorMatrixElement