Cryptex 3D CSS transforms with rotateX

This project is not related with a freeCodeCamp challenge, but I was hoping I could glean some wisdom from the forum.

Does anyone have any ideas about how I could solve the problem with the rotation of the rings when selecting between the first character and the last character of the array? I would prefer that the rotation value be a difference of 10 degrees rather than a full 360 degree rotation.