폴시랩

SVG와 CSS3 속성인 transition과 transform을 이용하여 버튼에 모션을 줍니다.

Explanation

자바스크립트로 엘리먼트에 클레스를 부여하고 CSS3 속성인 transition과 transform을 사용하여 SVG의 line를 변형하고 모션을 줍니다. (이렇게 단순한 구조는 굳이 SVG를 사용하지 않고도 block요소의 엘리먼트로도 충분히 만들 수 있겠지만, SVG를 사용하는게 조금 더 시멘틱하지 않을까??)
2015.06.10 추가사항
인터넷 익스플로러(IE)에서는 SVG의 요소들의 transform, transition 등.. 의 스타일이 적용되지 않습니다,
그리하여 SVG가 아닌 블락요소로 만든 예제도 추가하였습니다.

예제 링크 : /preview/svg/svg.html
 

소스보기

[HTML]
<div class="navigation-button">
	<svg xmlns="http://www.w3.org/2000/svg" width="65px" height="65px">
		<line class="nav_bar_1" x1="19px" y1="26px" x2="47px" y2="26px" stroke="#fff" stroke-width="2px"></line>
		<line class="nav_bar_2" x1="19px" y1="33px" x2="47px" y2="33px" stroke="#fff" stroke-width="2px"></line>
		<line class="nav_bar_3" x1="19px" y1="40px" x2="47px" y2="40px" stroke="#fff" stroke-width="2px"></line>
	</svg>	
</div>
[CSS]
.navigation-button {
	position:absolute;
	width:65px; 
	height:65px; 
	top:40px; 
	left:40px; 
	background:#000; 
	cursor:pointer;
}
.navigation-button svg {  
	transform: rotate(0);
	-webkit-transform: rotate(0);
	transition:transform 1s;
	-webkit-transition:transform 1s;
}
.active.navigation-button svg {
	transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
}
.navigation-button .nav_bar_1 { 
	transform: rotate(0) translateX(0) translateY(0);
	-webkit-transform: rotate(0) translateX(0) translateY(0);
	transition: 0.5s;
	-webkit-transition: 0.5s;
}
.navigation-button .nav_bar_2 {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
.navigation-button .nav_bar_3 {
	transform: rotate(0) translateX(0) translateY(0);
	-webkit-transform: rotate(0) translateX(0) translateY(0);
 	transition: 0.5s;
	-webkit-transition: 0.5s;
}
.active.navigation-button .nav_bar_1 {
	transform: rotate(45deg) translateX(13px) translateY(-26px);
	-webkit-transform: rotate(45deg) translateX(13px) translateY(-26px);
}
.active.navigation-button .nav_bar_2 {
	opacity: 0;
	transform: translateX(-5px);
	-webkit-transform: translateX(-5px);
}
.active.navigation-button .nav_bar_3 {
	transform: rotate(-45deg) translateX(-33px) translateY(6px);
	-webkit-transform: rotate(-45deg) translateX(-33px) translateY(6px);
}
[JAVASCRIPT - jQuery]
jQuery(document).ready(function(){
		
	$(".navigation-button").on("click", function(){
		if($(this).hasClass("active")){
			$(this).removeClass("active");
		}else{
			$(this).addClass("active");
		}
	});
    
});

 

2015.06.10 추가사항 - SVG를 사용하지 않고 만들기

<div class="navigation-button2">
	<div class="button-icon">
		<div class="nav_bar_top"></div>
		<div class="nav_bar_middle"></div>
		<div class="nav_bar_bottom"></div>
	</div>
</div>
.navigation-button2 {position:absolute; width:65px; height:65px; top:40px; left:200px; background:#000; cursor:pointer;}

.navigation-button2 .button-icon {
	width:65px;
	height:65px;
	transform: rotate(0);
	-webkit-transform: rotate(0);
	transition:transform 1s;
	-webkit-transition:transform 1s;
}
.active.navigation-button2 .button-icon {
	transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
}

.navigation-button2 .button-icon > div {
	position:absolute; 
	height:2px; 
	width:28px; 
	background:#fff; 
	left:19px;
}

.navigation-button2 .nav_bar_top { 
	transform: rotate(0) translateX(0) translateY(0);
	-webkit-transform: rotate(0) translateX(0) translateY(0);
	transition: 0.5s;
	-webkit-transition: 0.5s;
	top:25px;
}
.navigation-button2 .nav_bar_middle {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	transition: 0.3s;
	-webkit-transition: 0.3s;
	top:32px;
}
.navigation-button2 .nav_bar_bottom {
	transform: rotate(0) translateX(0) translateY(0);
	-webkit-transform: rotate(0) translateX(0) translateY(0);
 	 transition: 0.5s;
	-webkit-transition: 0.5s;
	top:39px;
}
.active.navigation-button2 .nav_bar_top {
	transform: rotate(45deg) translateX(5px) translateY(5px);
	-webkit-transform: rotate(45deg) translateX(5px) translateY(5px);
}
.active.navigation-button2 .nav_bar_middle {
	opacity: 0;
	transform: translateX(-5px);
	-webkit-transform: translateX(-5px);
}
.active.navigation-button2 .nav_bar_bottom {
	transform: rotate(-45deg) translateX(5px) translateY(-5px);
	-webkit-transform: rotate(-45deg) translateX(5px) translateY(-5px);
}
jQuery(document).ready(function(){
	
	$(".navigation-button, .navigation-button2").on("click", function(){
		if($(this).hasClass("active")){
			$(this).removeClass("active");
		}else{
			$(this).addClass("active");
		}
	});

});