🐾 transform (변형속성-응용)
접두어란?
크로스 브라우징을 위해서 사용하는 구문으로, 다양한 브라우저(IE, 크롬, 파이어폭스, 오페라, 사파리 등의 브라우저)가
존재하는 접두어를 속성 앞에 사용하여 모든 브라우저에서 호환되게 하기 위해 사용하는 언어.*크로스 브라우징
하나의 웹페이지를 제작하였을 때 모든 브라우저에서 올바르게 호환되게 하는 것을 말함.
ex)
transform:translate(20px,30px); -ms-transform:translate(20px,30px); /*ie9 익스플로러 용으로 보통 생략*/ -moz-transform:translate(20px,30px); /*파이어 폭스*/ -webkit-transform:translate(20px,30px); /*사파리, 크롬(구글)*/ -o-transform:translate(20px,30px); /*오페라*/
<style>
header {
width: 100%;
height: 100px;
background-color: rgb(234, 129, 91);
overflow: hidden;
}
#hamburger {
width: 64px;
height: 57px;
padding: 22px;
background-color: #ff9c78;
overflow: hidden;
cursor: pointer; /*마우스커서 - 손모양*/
}
.line {
background-color: beige;
width: 56px;
height: 5px;
margin: 10px 0px;
transition-duration: 0.5s;
}
#main {
font-family: Sunflower;
width: 100%;
overflow: hidden;
padding: 200px 0px;
background-color: #65b2e8;
text-align: center;
color: #fff;
}
</style>
<body>
<header>
<div id="hamburger">
<div class="line" id="top"></div>
<div class="line" id="mid"></div>
<div class="line" id="btm"></div>
</div>
</header>
<div id="main">
<h1>안녕하세요!</h1>
<p>저희 웹페이지에 방문해주어 감사합니다 - ! : )</p>
</div>
</body>
1️⃣ 여기서 첫번째라인을 움직여보자!
/*첫번째줄*/ #hamburger:hover #top { transform: translateY(15px) rotate(45deg); transform-origin: center; }
2️⃣ 두번째라인을 움직여보자
/*두번째줄*/ #hamburger:hover #mid { opacity: 0; }
3️⃣ 세번째라인을 움직여보자
#hamburger:hover #btm { transform: translateY(-15px) rotate(-45deg); transform-origin: center; }
그러면! 이제 완성 ❗️hover하면, hamburger모양 바뀜
<style> /*첫번째줄*/ #hamburger:hover #top { transform: translateY(15px) rotate(45deg); transform-origin: center; } /*두번째줄*/ #hamburger:hover #mid { opacity: 0; } #hamburger:hover #btm { transform: translateY(-15px) rotate(-45deg); transform-origin: center; } </style>
🐾 변환 속성 다중작성 방법
- matrix : perspective를 제외한 요소들을 한번에 적용 가능한 속성.
ex) transform: matrix(scaleX, skewX, skewY, scaleY, translateX, translateY)
- transform 다중적용 가능
여러가지 동작을 한꺼번에 사용할 시 , 띄어쓰기를 구분하여 속성을 작성
나를위한 노트필기 📒🔎📝