728x90
★ 변형, Transform
- 위치, 크기, 회전, 왜곡 등
- 1. transform : translate() : 위치 변형(이동)
- 2. transform : scale() : 크기, 배율 변형(확대|축소)
- 3. transform : rotate() : 회전 변형
- 4. transform : skew() : 왜곡 변형(비틀기)
- 5. transform : matrix() : 1~4번 포함. 사용자 정의형 > 행렬
- 6. transform-origin : 변형 > 기준점(원점) 지정
■ 사용 ex)
- ex1) transform : translate(x, y)
- x축, y축으로 이동
#box1 {
background-color: tomato;
transform : translate(50px, 0px);
}- 실행 결과
- ex2) transform : scale(x, y)
- 배율 만큼 확대/축소 기능
- 소수점 값을 넣으면 축소
- 음수 값을 넣으면 뒤집어짐
#box1 {
background-color: tomato;
/* transform : translate(50px, 0px); */
transform : scale(2,2);
margin-left : 300px;
margin-top : 300px;
}- 실행 결과
- ex3) transform : rotate(각도 deg)
transform : rotate(30deg);- 실행 결과
- ex 4) transform : skew(각도 deg, 각도 deg)
transform : skew(10deg, 10deg);- 실행 결과
- ex 5) transform-origin : x, y
#box3:hover {
transform-origin: 200px 0px ;
transform: rotate(45deg);
}- 실행 결과
■ 이미지에 Transform 적용
- HTML 코드
<h1>고양이</h1>
<div id="cat">
<img src="images/catty01.png">
<img src="images/catty02.png">
<img src="images/catty03.png">
<img src="images/catty04.png">
<img src="images/catty05.png">
</div>- CSS 코드
#cat > img:hover {
/* transform: translate(0px, -10px); */
/* transform : scale(1.2, 1.2); */
/* transform: rotate(30deg); */
transform : translate(0px, -50px) scale(1.4, 1.4);
}- 실행 결과
■ 메뉴를 Transform 적용
- HTML 코드
- <nav> : 네비게이션 태그
- 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용
<body>
<nav id="main-menu">
<img src="images/rect_icon01.png">
<img src="images/rect_icon02.png">
<img src="images/rect_icon03.png">
<img src="images/rect_icon04.png">
<img src="images/rect_icon05.png">
</nav>
</body>- CSS 코드
- 전체 메뉴가 내릴 수 있는 기능
#main-menu {
/* border : 1px solid black; */
font-size : 0px; /* Decender 공백 제거 */
width : 630px; /* 5개의 크기만금 공백 제거 */
margin : 0 auto; /* 블럭 태그의 가운데 정렬 마진을 좌우로 auto*/
transform : translate(0px, -100px)
}
#main-menu:hover {
transform: translate(0px, -10px);
}- 이미지 하나하나 내릴 수 있는 기능
#main-menu {
/* border : 1px solid black; */
font-size : 0px; /* Decender 공백 제거 */
width : 630px; /* 5개의 크기만금 공백 제거 */
margin : 0 auto; /* 블럭 태그의 가운데 정렬 마진을 좌우로 auto*/
transform : translate(0px, -100px)
}
#main-menu > img:hover {
transform: translate(0px, 90px);
}- 실행 결과
- 아래에 위치한 메뉴
#foot-menu {
/* border : 1px solid black; */
font-size : 0px; /* Decender 공백 제거 */
width : 630px; /* 5개의 크기만금 공백 제거 */
position : fixed;
bottom : 0;
left : calc(50% - 315px);
transform : translate(0px, 90px);
}
#foot-menu > img:hover {
transform: translate(0px, -90px);
}- 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 28 - Display (0) | 2023.04.19 |
|---|---|
| CSS STEP 27 - OutLine (0) | 2023.04.18 |
| CSS STEP 25 - Column (0) | 2023.04.18 |
| CSS STEP 24 - border (0) | 2023.04.18 |
| CSS STEP 23 - Background (0) | 2023.04.18 |
