3/29 css코드

@charset "utf-8";

@import url(http://fonts.googleapis.com/css?family=Orbitron);

/*    Reset CSS  */

* { margin:0;  padding:0;}

ol,ul { list-style: none; }

body {position:fixed;  width:100%; height:100%; background:#111;  font-family:orbitron; }

a { outline:0; text-decoration:none; color:#bbb;}

img {border:0;}

.wrap { position:fixed; width:100%; height:100%; min-width:1024px; min-height:768px; perspective:900px;}

/* 메뉴 호출 버튼 */

.btnMenu {

    position:fixed; 

    top:50px; 

    left:40px; 

    display:inline-block;

    width:20px; 

    height:70px;

    text-align:center; 

    font-size:40px; 

    color:#fff; 

    z-index:3;

    animation:ani 0.5s infinite  alternate;

}

@keyframes ani { /* 애니메이션 등록 코드 */

0% { transform:scale(1); opacity:1; color:#fff;}

100% { transform:scale(1.5); opacity:0.8; color:#888;}

}

/* 카테고리 그룹 */

nav { position:fixed; width:150px;height:100%;

background:#eee;

z-index:2; }

/* jquery로 적용/미적용을 반복하는 클래스 */

nav.on {

    transform:rotateY(15deg); /* 15도 회전 */

    opacity:1;

}

/* 로고 */

nav h1 { width:100px; 

position:absolute; 

top:80px; left:50%; margin-left:-50px;}

nav h1 img {

width:100%; height:auto; }

/* 카테고리 메뉴 */

nav ul { 

position:absolute; top:35%; left:0px; width:100%;}

nav li a { 

display:block; width:100%;

box-sizing:border-box; font-size:18px;

line-height:4; color:#000; text-align:center; transition:all 0.5s;}

nav li a:hover { 

color:#fff;background:#000;}

/* 컨텐츠 그룹*/

section { position:fixed; width:100%; height:100%; z-index:1; }

section>div { position:absolute;width:100%; height:100%;}

/* jquery로 적용/미적용을 반복하는 클래스 */

section.on { 

    transform:rotateY(-10deg); /* -10도 회전 */

}