Hamburger menu markup

gistfile1.html

<div id="toggle" class="">
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</div>
<!-- just toggle the "on" class with js :)  -->

hamburger-anim.scss

#toggle {
	transition: all .3s;
	opacity: 1;
	width: 15px; 
	height: 15px;
	display: inline-block;
	position: absolute;
	padding: 39px 39px; //tofix 
	user-select: none;
	box-sizing: content-box;
	cursor: pointer;

	&:hover {
	  //opacity: .9;
	}
	div {
	  width: 100%;
		height: 2px;
		background: #fff;
		margin-bottom: 3px;
		transition: all .3s .3s;
		backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
	}
	.one, .two {
		transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 0, 0);
	}
	&.on{
		.one{
			transform: rotate3d(0, 0, 1, 45deg) ;
			transform-origin: 0% 0%;
		}
		.two{
			opacity: 0;
		}
		.three{
			transform: rotate3d(0, 0, 1, -45deg) ;
			transform-origin: 0% 100%;
		}
	}
}