rect {
    fill: yellow;
}

rect:hover {
    fill: green;
    transform-origin: 50px 50px;
    transform: rotate(45deg);
}

<svg xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" x="20" y="50" />
<style>
  rect {
    fill: yellow;
}

rect:hover {
    fill: green;
    transform-origin: 50px 50px;
    transform: rotate(45deg) skewY(45deg)
}
</style>
</svg>