svg rotate on hover

by Przemysław Łach

HTML

<svg class="transform" width="24px" height="24px" viewBox="111 533 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Group-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(111.000000, 533.000000)">
        <rect id="card-copy-12" fill="#673AB7" x="0" y="0" width="24" height="24" rx="12"></rect>
        <polygon id="Hint-text-Copy-19" fill="#FFFFFF" points="11.195989 15.9408961 11.195989 12.7629879 8 12.7629879 8 11.1779082 11.195989 11.1779082 11.195989 8 12.7388802 8 12.7388802 11.1779082 15.9408961 11.1779082 15.9408961 12.7629879 12.7388802 12.7629879 12.7388802 15.9408961"></polygon>
    </g>
</svg>

CSS

.transform {
    transition: transform 0.2s ease-in;
}

.transform > g > rect {
    transition: fill 1s ease-in;
}

.transform:hover {
    transform: rotate(45deg);
}

.transform:hover > g > rect {
    fill: red;
}