Смещается картинка при transform: rotate (360deg)

.yandex {
    transition: 2s;
    font-size: 30px;
    text-align: center;
    background-color: yellow;
    border: 5px solid #000000;
    border-radius: 50px;
    margin: 200px auto auto;
    width: 100px;
    padding: 10px;
    box-shadow: 10px 10px 35px #000000;
}
 
.google {
    transition: 2s;
    font-size: 30px;
    text-align: center;
    background-color: yellow;
    border: 5px solid #000000;
    border-radius: 50px;
    margin: 200px auto auto;
    width: 100px;
    padding: 10px;
    box-shadow: 10px 10px 35px #000000;
}
 
.yandex:hover {
    transform: rotate(360deg) scale(1.2);
}
 
.google:hover {
    transform: rotate(360deg) scale(1.2);
}
 
.yandex-img {
    position: absolute;
    left: 200px;
    transition: 2s;
    opacity: 0;
    width: 200px;
}
 
.google-img {
    position: absolute;
    right: 200px;
    bottom: 325px;
    transition: 2s;
    opacity: 0;
    width: 200px;
}
 
.yandex:hover + .yandex-img {
    transform: rotate(360deg);
    opacity: 1;
}
 
.google:hover + .google-img {
    transform: rotate(360deg);
    opacity: 1;
}
 
html {
    height: 100%;
}