How to smoothly rotate a game object across two different axes

I’m working on a racing game. I have my wheels rotating vertically both forward and backward when the car is in motion.

When I added code to have the tires rotate horizontally, the animation is off. When I steer the car, it the wheels are sort of “wobbling” and tilting diagonally. This happens when they are being rotated vertically and horizontally at the same time.

When I first researched it, the first and probably obvious solution is to create a parent game object and the wheel mesh itself as the child game object so I can rotate the parent vertically and the child horizontally or vice versa. That did not seem to work. (As you can see in the image below, I have the "FrontRight" parent object and the actual wheel mesh child. Both collectively are the car’s front right wheel. I did the same with the other three wheels).

image

The rotations of the parent game objects are (0, 0, 0) while the rotations of the child game objects (the wheel meshes) are (0, 0, 90) so that they are facing upward. (I used cylinder game objects and made them thin to represent the wheels on the car).

Here is my code that makes the wheels rotate vertically when the car moves. (This is working fine).

// paste code here instead of taking a photo of a text editor, please

image
image

I created a separate script to animate the horizontal rotation of the wheels. That script contains the following code. I attached this script to both the front right and front left wheel mesh/child objects. (That steerAngle variable is set to 30 in the editor btw).

// paste code here instead of taking a photo of a text editor, please

What should I change in my code to get the two wheels to properly rotate my wheels on both axes?

Read About Slerp In Documentation You Can Use Slerp For Smooth Rotation.

Just rotate the wheel in local space too. That’s the point of having a parent. The parent does the steering, the wheel just spins. But in local space, relative to parent.
transform.Rotate works in world space. Why not just set localRotation directly?