css transform origin gets overwritten with rotate - css

Question

I'm looking into CSS transforms and I cant get this one part to work.
#photo-container img {
transition: transform 2s, transform-origin 2s;
}
#container-1 img:hover {
transform: rotate(45deg);
transform-origin: 0 0;
}
#container-2 img:hover {
transform: rotate(1.5turn);
transform-origin: 50%, 50%;
}
#container-3 img:hover {
transform: scale(1.5);
transform-origin: 0 0;
}
<div class="photo-container" id="container-1">
<div class="photo">
<img src="http://placehold.it/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
The three classes HTML elements are the same as the one posted below.
My question is that say I change the transform origin to 0 0, and it has a transform set to rotate, when the rotate occurs and finishes, instead of returning to its original position the same way it did to get there, it recenters itself, then goes to that point that was specified in the rotate function and does it from there.
Is there something I missed here or is this the normal functionality?
Edit. i stuffed something up. sorry to bother

Answer 1

Try to add transform-origin to images without hover. And change #photo-container to .photo-container I can't see another problem with it.
.photo-container {
display: inline-block;
}
.photo-container img {
transition: transform 2s, transform-origin 2s;
transform-origin: 0 0;
}
#container-1 img:hover {
transform: rotate(45deg);
}
#container-2 img:hover {
transform: rotate(1.5turn);
}
#container-3 img:hover {
transform: scale(1.5);
}
<div class="photo-container" id="container-1">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
<div class="photo-container" id="container-2">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
<div class="photo-container" id="container-3">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>