Трансформирование бургера в крестик на css

Трансформирование бургера в крестик на css

Пример:

Кликни

Понадобится svg бургер:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="16px">
	<path fill-rule="evenodd"  fill="rgb(255, 255, 255)" d="M-0.000,-0.000 L17.000,-0.000 L17.000,2.000 L-0.000,2.000 L-0.000,-0.000 Z"/>
	<path fill-rule="evenodd"  fill="rgb(255, 255, 255)" d="M-0.000,7.000 L17.000,7.000 L17.000,9.000 L-0.000,9.000 L-0.000,7.000 Z"/>
	<path fill-rule="evenodd"  fill="rgb(255, 255, 255)" d="M-0.000,14.000 L17.000,14.000 L17.000,16.000 L-0.000,16.000 L-0.000,14.000 Z"/>
</svg>

И по клику добавляем класс (например active) и делаем трансформацию:

path{
	transition: transform 0.25s;
}
.active path:nth-of-type(1){
	transform: rotate(45deg);
	transform-origin: -1px 3px;
}
.active path:nth-of-type(2){
	display: none;
}
.active path:nth-of-type(3){
	transform: rotate(-45deg);
	transform-origin: 0px 13px;
}

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.