** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
https://www.youtube.com/watch?v=DVvXE4uN1oA
1. 3D transform의 함수값
| 함수 값 | 설명 |
| rotate3d(x, y, z, angle) | 3D회전을 한번에 정의 |
| rotateX() | X축을 중심으로 3D회전을 정의 |
| rotateY() | Y축을 중심으로 3D회전을 정의 |
| rotateZ() | Z축을 중심으로 3D회전을 정의 |
| scale3d(x, y, z) | 3D스케일(크기) 변화를 한번에 정의 |
| scaleX() | X축을 중심으로 3D크기를 정의 |
| scaleY() | Y축을 중심으로 3D크기를 정의 |
| scaleZ() | Z축을 중심으로 3D크기를 정의 |
| translate3d(x, y, z) | 3D적 요소 이동을 한번에 정의 |
| translateX() | X축을 중심으로 3D이동을 정의 |
| translateY() | Y축을 중심으로 3D이동을 정의 |
| translateZ() | Z축을 중심으로 3D이동을 정의 |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
16개값으로 구성되어 4X4행렬로 모든 3Dtransform값을 정의 |
| perspective(n) | 3D 변형 요소의 투시도를 지정 |
2. 3D transform과 함께 사용되어야 할 속성
| 속성 | 설명 |
| transform-origin | 변형의 중심점을 바꿀 수 있는 속성 |
| transform-style | 3D공간에서 그 속성을 하위요소에 전달할지의 여부를 지정한다. preserve-3d : 하위요소에 3D속성을 그대로 전달 기본값은 flat으로 3D속성을 하위요소에게 전달하지 않도록 처리 |
| perspective | 3D요소를 보는 관점을 소실점방식으로 처리함 |
| perspective-origin | 3D요소의 하단 위치를 지정 |
| backface-visibility | 3D적 관점으로 화면의 뒷면으로 갈때 보이게 할지 안보이게 할지를 지정하는 속성 |
3. 3D를 보여주기 위한 perspective
- 기본적으로 transform에서 3D적 transform만 사용한다고 해서 3D로 보이진 않는다.
컴퓨터는 2차원인 x축과 y축으로 이루어진 평면이기 때문이다.
- perspective를 사용하여 투시도를 설정해야 3D적 입체감을 줄 수 있다.
perspective: 숫자px;- 여기서 말하는 숫자는 Z축을 기준으로 관찰자가 요소로 부터 얼마나 떨어져서 관찰하는가를 명시하는 숫자
- 간략하게 설명하면 숫자가 커질수록 멀리 떨어져서 보이게 된다는 것
- 기본적으로 멀리 떨어져 있어야 하는 사물은 작게 만들고 가까운 곳에 있어야 하는 사물은 크게 만들어서 원근감을 부여하는 것으로 이해해도 무방
1) 회전 rotateX()를 이용한 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
background-color: #ededed;
margin: 50px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transform: rotateX(50deg);
}
.box01{ perspective: none; }
.box02{ perspective: 100px; }
.box03{ perspective: 200px; }
</style>
</head>
<body>
<section class="box01">
<div>none</div>
</section>
<section class="box02">
<div>100px</div>
</section>
<section class="box03">
<div>200px</div>
</section>
</body>
</html>- section을 부모로 설정하고 각각의 클래스를 적용
- section에 배경색을 넣은 것은 자손인 div가 회전되는 상태를 보기 위해 사용
- 모든 div는 X축을 기준으로 회전을 50도 하도록 설정
- 첫번째 section인 .box01인 요소에 perspective: none;으로 설정 - 기본값
- 두번째 section인 .box02인 요소에 perspective: 100px;으로 설정
- 세번째 section인 .box03인 요소에 perspective: 200px;으로 설정
2) 코드 완성 뷰
- 첫번째 오렌지 박스는 rotateX(50deg)를 받았지만 perspective효과를 받지 못해 3D적 느낌을 받을 수가 없다.
- 두번째 오렌지 박스는 perspective: 100px; 처리하여 관찰자가 가깝게 있다고 느끼기 때문에 사물이 더 크게 보여 더 기울어진 것 처럼 보인다.
- 세번째 오렌지 박스는 perspective효과는 들어가서 3D적 느낌을 받을 수는 있으나, 200px로 관찰자의 거리가 멀어져서 사물의 회전폭이 더 작아진 것을 확인할 수 있다.
4. 3D transform을 이용한 회전 처리
- 각각의 rotateX, rotateY, rotateZ를 처리
1) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
background-color: #ededed;
margin: 50px;
perspective: 150px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 0.5s;
}
.box01:hover{ transform: rotateX(70deg); }
.box02:hover{ transform: rotateY(70deg); }
.box03:hover{ transform: rotateZ(70deg); }
</style>
</head>
<body>
<section>
<div class="box01">X축 회전</div>
</section>
<section>
<div class="box02">Y축 회전</div>
</section>
<section>
<div class="box03">Z축 회전</div>
</section>
</body>
</html>- section인 부모에 배경생을 회색으로 처리하고 perspective를 150px로 처리
- div인 자손 요소에 각각 클래스를 지정, 마우스를 올리면 회전되도록 처리
- .box01에는 rotateX(70deg)를 지정
- .box02에는 rotateY(70deg)를 지정
- .box03에는 rotateZ(70deg)를 지정
2) 코드 완성 뷰
- 첫번째 오렌지 박스는 x축을 기준으로 3D적으로 회전하는 것을 확인할 수 있다.
- 두번째 오렌지 박스는 y축을 기준으로 3D적으로 회전하는 것을 확인할 수 있다.
- 세번째 오렌지 박스는 z축을 기준으로 처리되다보니 3D적이기보단 2D적으로 보인다.
5. 3D transform을 이용한 이동처리
- 각각의 translateX(), translateY(), translateZ() 함수를 통한 이동 처리
1) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
background-color: #ededed;
margin: 50px;
perspective: 150px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 0.5s;
}
.box01:hover{ transform: translateX(-50px); }
.box02:hover{ transform: translateY(-50px); }
.box03:hover{ transform: translateZ(-50px); }
</style>
</head>
<body>
<section>
<div class="box01">X축 이동</div>
</section>
<section>
<div class="box02">Y축 이동</div>
</section>
<section>
<div class="box03">Z축 이동</div>
</section>
</body>
</html>- section은 부모로 처리하고 배경색을 회색으로 처리
- div는 자손으로 처리하고 각각 클래스를 배정하고 배경색을 오렌지 색으로 처리
- .box01에 마우스를 올리면 transform: translateX(-50px);으로 처리
- .box02에 마우스를 올리면 transform: translateY(-50px);으로 처리
- .box03에 마우스를 올리면 transform: translateZ(-50px);으로 처리
- section에 perspective속성을 주지 않으면 .box03은 아무런 효과가 나지 않으므로 반드시 설정
2) 코드 완성뷰
- 첫번째 오렌지 박스는 왼쪽으로 -50px만큼 이동 처리
- 두번째 오렌지 박스는 위쪽으로 -50px만큼 이동 처리
- 세번째 오렌지 박스는 뒤로 이동하는 느낌을 줄수 있다.
부모인 section에 perspective속성을 주지 않으면 효과를 볼수 없다.
음수로 처리하면 뒤로 이동하는 느낌을 주고 양수로 처리하면 앞으로 이동하는 느낌을 준다.
6. transform-origin을 통한 변형점 이동
- 2D transform에서도 변형점을 이동시켜 변형을 다르게 해봤듯이, 3D transform도 변형점 이동이 가능하다.
- transform-origin의 기본값은 center로 가로 세로 가운데 중점이다.
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;
background-color: #ededed;
margin: 50px;
perspective: 150px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 1s;
}
.box01{ transform-origin: center; }
.box02{ transform-origin: center top; }
.box03{ transform-origin: center bottom; }
div:hover{ transform: rotateX(180deg); }
</style>
</head>
<body>
<section>
<div class="box01">가운데기준</div>
</section>
<section>
<div class="box02">상단기준</div>
</section>
<section>
<div class="box03">하단기준</div>
</section>
</body>
</html>- section을 부모로 설정하고 배경색을 회색으로 설정
- section에 perspective를 줌으로써, 원근감 효과를 주었다.
- div는 자손 요소로 설정하고 배경색을 오렌지색으로 설정
- div는 마우스올릴시 X축을 기준으로 회전하는 3D적 회전을 설정
- .box01에는 변형점의 기본은 center로 처리
- .box02에는 상단으로 처리
- .box03에는 하단으로 처리하였다.
2) 코드 완성뷰
- 첫번째 박스는 가운데를 기준으로 회전
- 두번째 박스는 상단을 기준으로 회전
- 세번째 박스는 하단을 기준으로 회전하는 것을 확인할 수 있다.
7. backbackface-visibility속성
- backface-visibility는 3D관점으로 화면 뒷면을 보이게 할지 숨길지를 정하는 속성
- 기본값은 visible이어서 보이고, hidden으로 처리하면 보이지 않는다.
backface-visibility: hidden;
1) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
*{ padding: 0; margin: 0; }
section{
width: 100px; height: 100px;
background-color: #ededed;
margin: 50px;
perspective: 150px;
}
div{
width: 100px; height: 100px;
background-color: orange;
transition: 2s;
}
.box01{ backface-visibility: visible; }
.box02{ backface-visibility: hidden; }
div:hover{ transform: rotateX(360deg); }
</style>
</head>
<body>
<section>
<div class="box01">visible</div>
</section>
<section>
<div class="box02">hidden</div>
</section>
</body>
</html>- section과 div를 각각 2개로 처리한 후 div에 클래스를 각각 적용하였다.
- div에 마우스를 올리면 X축을 중심으로 한 회전을 하도록 처리했다.
- .box01은 backface-visibility의 기본값은 visible로 처리하면 회전하더라도 뒷면이 보이도록 처리했다.
- .box02는 backface-visibility를 hidden으로 처리하여 회전할때 뒷면이 안보이도록 처리했다.
2) 코드 완성 뷰
- 첫번째 div는 마우스를 올릴때 돌아가는 뒷면도 보인다.
- 두번째 div는 마우스를 올릴때 돌아가는 뒷면이 보이지 않는다.
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 25강 배경이미지 고정처리 - OSSAM강좌 (0) | 2020.06.03 |
|---|---|
| [CSS3강좌] 24강 animation속성 - OSSAM강좌 (0) | 2020.05.29 |
| [CSS3강좌] 22강 transform(변형)속성 - 2D변형 - OSSAM강좌 (0) | 2020.05.27 |
| [CSS3강좌] 21강 transition(변화)속성 - OSSAM강좌 (0) | 2020.05.26 |
| [CSS3강좌] 20강 구글웹폰트와 @font-face - OSSAM강좌 (0) | 2020.05.22 |
