** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
https://www.youtube.com/watch?v=DVvXE4uN1oA
1. 2D transform의 함수 값의 종류
- transform을 사용하면 포토샵처럼 회전, 기울기, 크기변형, 이동들을 할 수 있다.
| 함수 값 | 설명 |
| rotate() | 요소를 회전, 단위는 deg |
| scale(x,y) | 요소의 너비와 높이를 같이 변경, 단위는 등배단위 |
| scaleX() | 요소의 너비만 변경, 단위는 등배단위 |
| scaleY() | 요소의 높이만 변경, 단위는 등배단위 |
| skew(x,y) | X축과 Y축에 따라 기울기 변환, 단위는 deg |
| skewX() | X축을 기준으로 기울기 변환, 단위는 deg |
| skewY() | Y축을 기준으로 기울기 변환, 단위는 deg |
| translate(x,y) | 요소의 이동을 x축, y축으로 이동, 단위는 px |
| translateX() | 요소를 x축으로 이동, 단위는 px |
| translateY() | 요소를 y축으로 이동, 단위는 px |
| matrix(n,n,n,n,n,n) | 6개의 매개변수를 한번에 처리 matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) |
2. 2Dtransform 구현
1) rotate() - 회전 함수, 단위는 deg(각도)
transform: rotate(각도deg);
a) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
border: 3px solid black;
margin: 50px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 0.3s;
}
div:hover{ transform: rotate(45deg); }
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>- section이 div를 감싼 부모고 회전되는 것을 확인하기 위한 테두리를 지정하였다.
- div는 배경색을 지정하고 마우스 올렸을 때 회전이 자연스럽게 처리되도록 transition: 0.3s;를 처리하였다.
b) 코드 완성뷰
- 마우스 오버시 오렌지 박스가 자연스럽게 45도 회전하는 것을 확인할 수 있다.
2) scale - 크기변형 - 단위 등배단위
- scale은 크기를 변경하는 함수로 x축과 y축을 한번에 변경할 수 있다.
- scale의 단위는 등배단위인데 2라고 쓰면 2배, 0.5라고 쓰면 0.5배 이런식으로 받아들일 수 있다.
transform: scale(x축크기,y축크기);
a) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
border: 3px solid black;
margin: 50px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 0.3s;
}
div:hover{ transform: scale(1.2,1.2); }
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>- div에 마우스를 올렸을 때 x축도 1.2배, y축도 1.2배로 커지도록 처리
b) 코드 완성뷰
- 오렌지 박스에 마우스를 올리면 커지면서 부모의 테두리도 가리는 것을 확인할 수 있다.
3) scaleX와 scaleY
- 크기 변형을 X축 혹은 Y축만 변경할때 사용
transform: scaleX(1.5);
transform: scaleY(1.5);
a) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
border: 3px solid black;
margin: 50px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 0.3s;
}
.box01:hover{ transform: scaleX(1.5); }
.box02:hover{ transform: scaleY(1.5); }
</style>
</head>
<body>
<section>
<div class="box01">X축 변경</div>
</section>
<section>
<div class="box02">Y축 변경</div>
</section>
</body>
</html>- section과 div를 두개를 따로 작성하여 div에 각각의 클래스를 적요
- box01에는 가로폭만 크게 설정
- box02에는 세로폭만 크기 설정
b) 코드 완성뷰
- 위쪽 오렌지 박스에 마우스를 올리면 가로로 커지고,
아래쪽 오렌지 박스에 마우스를 올리면 세로로 커지는 것을 확인할 수 있다.
4) skewX와 skewY
- skew는 요소의 기울기를 처리하는 함수
- 단위는 deg로 각도를 표시
transform: skewX(30deg);
transform: skewY(30deg);
a) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
border: 3px solid black;
margin: 50px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 0.3s;
}
.box01:hover{ transform: skewX(30deg); }
.box02:hover{ transform: skewY(30deg); }
</style>
</head>
<body>
<section>
<div class="box01">X축 기울기</div>
</section>
<section>
<div class="box02">Y축 기울기</div>
</section>
</body>
</html>- box01은 x축으로 30도 기울게 처리
- box02는 y축으로 30도 기울게 처리
b) 코드 완성뷰
- 첫번째 오렌지 박스에 마우스 오버하면 수평적(x축)으로 기울게 처리
- 두번째 오렌지 박스에 마우스 오버하면 수직적(y축)으로 기울게 처리
5) translate, translateX, translateY 함수
- translate(x ,y)로 x축과 y축을 한번에 이동 처리
- translateX는 x축으로만 이동
- translateY는 y축으로만 이동
- 단위는 px단위 사용
transform: translate(x축이동, y축이동);
transform: translateX(20px);
transform: translateY(20px);
a) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
border: 3px solid black;
margin: 50px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 0.3s;
}
.box01:hover{ transform: translate(30px, 30px); }
.box02:hover{ transform: translateX(30px); }
.box03:hover{ transform: translateY(30px); }
</style>
</head>
<body>
<section>
<div class="box01">X축Y축 모두 이동</div>
</section>
<section>
<div class="box02">X축 이동</div>
</section>
<section>
<div class="box03">Y축 이동</div>
</section>
</body>
</html>- section와 div를 세개로 처리함
- .box01에는 translate()함수를 처리하여 x축과 y축을 한번에 이동
- .box02에는 translateX()함수를 처리하여 x축만 이동
- .box03에는 translateY()함수를 처리하여 y축만 이동
b) 코드 완성 뷰
- 첫번째 오렌지 박스에 마우스를 올리면 x축과 y축이 동시에 이동
- 두번째 오렌지 박스에 마우스를 올리면 x축만 이동
- 세번째 오렌지 박스에 마우스를 올리면 y축만 이동
3. transform-origin
- transform의 중심점(변형점)의 위치를 이동시키는 속성
- transform-origin은 포토샵에서의 transform중심점과 같다고 보면 된다.
transform-origin: x축중심 y축중심;
- 포토샵에서 중심점이 고양이 가운데 있을 때의 회전
- 포토샵에서 중심점이 고양이 아래가운데 있을 때의 회전
1) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
border: 3px solid black;
margin: 50px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 0.3s;
}
.box01{ transform-origin: center; }
.box02{ transform-origin: left top; }
.box03{ transform-origin: right bottom; }
div:hover{ transform: skewX(25deg); }
</style>
</head>
<body>
<section>
<div class="box01">변형점 - 가운데</div>
</section>
<section>
<div class="box02">변형점 - 좌측상단</div>
</section>
<section>
<div class="box03">변형점 - 우측하단</div>
</section>
</body>
</html>- section과 div를 3개씩 작성
- .box01의 중심점은 가운데로 처리(실제적으로 기본값) - transform-origin: center;
- .box02의 중심점은 좌측상단으로 처리 - transform-origin: left top;
- .box03의 중심점을 우측하단으로 처리 - transform-origin: right bottom;
- div들에 마우스를 올리면 x축을 중심으로 25도 기울게 처리
2) 코드 완성 뷰
- 첫번째 오렌지 박스는 변형점이 가운데여서 가운데를 중심으로 기움
- 두번째 오렌지 박스는 변형점이 좌측상단이어서 그것을 기준으로 기움
- 세번째 오렌지 박스는 변형점이 우측하단이어서 그것을 기준으로 기움
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 24강 animation속성 - OSSAM강좌 (0) | 2020.05.29 |
|---|---|
| [CSS3강좌] 23강 transform(변형속성) - 3D변형 - OSSAM강좌 (0) | 2020.05.28 |
| [CSS3강좌] 21강 transition(변화)속성 - OSSAM강좌 (0) | 2020.05.26 |
| [CSS3강좌] 20강 구글웹폰트와 @font-face - OSSAM강좌 (0) | 2020.05.22 |
| [CSS3강좌] 19강 CSS 텍스트줄임 (0) | 2020.05.22 |
