앞서 살펴본 transform 속성의 함수들을 이어서 살펴보도록 하겠습니다.
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2
앞서서 우리는 CSS에서 사용되는 transform 속성에 대해서 전반적으로 살펴보았습니다. 이 transform 속성에서 사용되는 여러 종류의 함수들을 2차원, 3차원으로 분류하여 알아보기도 했습니다. 이제
nozeroslope.tistory.com
○ rotate( ) 함수 - 요소 회전
* 2차원 rotate( ) 함수 : rotate( ) 함수를 2차원에서 사용할 때에는, 회전 각도만 지정해 주면 됩니다. 회전 각도가 양수일 경우 오른쪽 시계 방향, 음수일 경우 왼쪽 반시계 방향으로 회전하게 됩니다. 여기서 사용하는 각도의 값은 degree나 radian(180 º/π)을 사용합니다.
transform : rotate(각도)
위와 같은 형태로 사용하게 되는데, 간단한 2차원 rotate( ) 함수 사용 예제를 함께 살펴보도록 하겠습니다.
/* 생략 */
#rotate1:hover {
transform: rotate(40deg);
}
#rotate2:hover {
transform: rotate(-40deg);
}
* 3차원 rotate( ) : 3차원 rotate의 경우 x축, y축, z축을 기준으로 회전하는 경우 사용하게 됩니다. 다른 3차원 transform 함수와 마찬가지로 축의 기준에 따라 다양한 함수가 존재합니다.
transform: rotate(rx, ry, 각도)
transform: rotate3d(rx, ry, rz, 각도)
transform: rotateX(각도)
transform: rotateY(각도)
transform: rotateZ(각도)
- 이 때, 이 3차원의 rotate( ) 함수를 사용할 때 원근감을 나타내기 위해서는 perspective 속성을 함께 사용해야 합니다. 기본적으로 perspective 속성 값은 0보다 큰 픽셀 값으로 선언되며, 이를 통해서 원근감을 표현하게 됩니다. 값이 클수록 사용자로부터 멀어지는 것을 의미하죠. 만일, perspective 값을 극단적으로 작게 한다면(10px 정도) 회전할 때 모니터를 가득 채우는 수준으로 사용자에게 가깝게 표시합니다. 300px 정도로 설정하게 되면 우리가 흔히 생각하는 3차원 회전을 하게 되죠.
참고로 해당 속성은 적용하고자 하는 요소가 아니라 그 요소의 부모 요소에 정의해야 합니다. 아무래도 설명만으로는 명확히 이해가 되지 않을 수도 있으니, 아래 예제에서 확인을 해보겠습니다.
/* 생략 */
.rotatex:hover {
transform: rotateX(50deg); /* x축으로 50도 회전 */
}
#pers {
perspective:300px; /* 원근감 추가 */
}
</style>
</head>
<body>
<h4>원본 이미지</h4>
<div class="origin">
<img src="images/sunset.jpg" alt="">
</div>
<div class="origin">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
<div class="origin" id="pers">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
</body>
</html>
위 이미지에서 첫 번째는 원본, 두 번째는 단순히 rotateX에 50도를 적용했을 때의 이미지입니다. 세 번째는 rotateX에 50도를 적용하되, 해당 클래스 "rotatex"의 부모 클래스인 "pers"에 perspective 속성 값을 300px을 주었을 때의 화면입니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 1 (0) | 2023.08.21 |
|---|---|
| [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 4 (0) | 2023.08.04 |
| [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2 (0) | 2023.07.27 |
| [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 1 (0) | 2023.07.17 |
| [CSS] 7. 가상 클래스와 가상 요소(3) - 구조 가상 클래스 2 (0) | 2023.07.12 |
