CSS旋转不起作用@媒体查询在旋转后不会更改回

我花了一个星期的时间来解决媒体查询中的问题，但我仍然无法解决这个问题。图像移动到1028像素时仍无法旋转

我在网站的红色背景上有一个图像。当达到1028px时，我希望图像在屏幕不旋转的情况下改变。我知道这是@media query根据以下来源使用并使用0的最佳方式。我认为我这样做是正确的，但问题是图像对我输入的内容没有影响。我确信@media query假定适用，并且图像假定可以旋转。当最小化屏幕为1028像素时，图像从顶部容器掉落到第二个和第三个容器。我觉得这太荒谬了

我希望你们能给我一些支持，我已经拍摄了一个屏幕截图来展示这一点：

/*标题图像*/
.标题图像{
宽度：60%；
-ms变换：旋转（25度）；/*IE 9*/
-moz变换：旋转（25度）；
-webkit变换：旋转（25度）；
变换：旋转（25度）；
位置：绝对位置；
右：30%；
}
@介质（最大宽度：1028px）{
.标题图像：{
位置：静态；
变换：旋转（0）；
}
}

您的CSS中在

之后有一个冒号。标题图像：

导致您的样式无法应用。删除冒号，当显示宽度低于1028px时，将应用样式。另一个注意事项–对于引导，通常设计从标题图像设置为宽度60%（首先移动）开始，然后在最小宽度1029px处添加绝对位置和旋转内容。谢谢您的建议

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