CSS rotate is not work @media query does not change back after rotating

Issue

I have been spending a week to solve the issue on a media query but I still not able to solve this issue. The image is still not able to rotate when it shift to the 1028 pixel.

I have a image at the on the red background of my web site. I want the image to change in response to a screen with no rotate when is reach to 1028px. I understand this is the best way to using by @media query as per the source below and rotate with 0. I think I am in right way to do, but the problem is the image is not effect for what I input. I am sure that @media query suppose to applies and the image suppose could rotate. When minimize the screen to be 1028 px, the image just dropped over from the top container to the second and third container. Which I think this is super ridiculous!

I hope you guys could give me some support, and I have taken a screen capture to show this working:

/* title-image */
.title-image{
  width:60%;
  -ms-transform: rotate(25deg); /* IE 9 */
  -moz-transform:rotate(25deg);
  -webkit-transform:rotate (25deg);
  transform: rotate(25deg);
  position: absolute;
  right: 30%;

}

@media (max-width: 1028px){
  .title-image:{
    position: static;
    transform: rotate(0);

      }
}

Solution

.tite-image {
    position: static;
     transform: rotate(0);
       }

Answered By - Mu_Ali