Почему Rotate() не работает при переводе объекта? ⇐ CSS

[Anonymous]

У меня на веб-странице есть изображение, которое я хочу повернуть, но оно смещается со своего места и дает сбой, когда я использую Transform Translate() и Transform Rotate(). Я попробовал переместить строки кода, но это тоже не сработало. Имя файла изображения — «Rock.png».
Использованный мной код:
Css:
#rock {
content: url(Rock.png);
background-color: blue;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: rotate(45deg);
}

Html:



Подробнее здесь: https://stackoverflow.com/questions/793 ... -my-object