앞에서 살펴본 rotate( ) 함수와 관련해, 3D 회전의 예제도 좀 더 살펴보겠습니다.
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 3
앞서 살펴본 transform 속성의 함수들을 이어서 살펴보도록 하겠습니다. [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2 앞서서 우리는 CSS에서 사용되는 transform 속성에 대해서 전반적으로 살펴
nozeroslope.tistory.com
아래 예제에서는 마우스 포인터를 올리면 x축, y축, z 축으로 각각 60도씩 회전(각각의 축에 방향벡터를 지정하고 60도 회전)하고, 여기에 트랜지션 효과까지 적용했습니다. 트랜지션은 추후 아티클에서 다룰 예정입니다.
앞서서 설명했던 perspective 속성은, 각각의 요소의 부모 요소인 origin에 적용하였습니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
#container{
width:800px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
margin: 40px;
float: left;
border: 1px solid black;
perspective: 200px;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
transition:all 3s;
}
#rotatex:hover {
transform: rotateX(60deg);
}
#rotatey:hover {
transform: rotateY(60deg);
}
#rotatez:hover {
transform: rotateZ(60deg);
}
#rotatexyz:hover {
transform: rotate3d(2.5, 1.2, -1.5, 60deg);
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="rotatex"></div>
</div>
<div class="origin">
<div id="rotatey"></div>
</div>
<div class="origin">
<div id="rotatez"></div>
</div>
<div class="origin">
<div id="rotatexyz"></div>
</div>
</div>
</body>
</html>
위에서 부모 클래스인 'origin'에 perspective 속성을 적용했고, 각각의 id에 rotate( ) 함수를 부여했습니다.
○ skew( ) 함수 - 요소 왜곡
skew( ) 함수를 사용하게 되면, 설정한 각도만큼 요소를 비틀어 줍니다. 이 때 x축 또는 y축을 기준으로 비틀게 되는데, x축의 경우 양수일 경우 x축을 기준으로 좌측으로 당겨 비틀게 됩니다. y축 값의 경우도 양수일 경우에는 좌측을 y축 기준으로 당겨서 비트는 형태가 됩니다.
transform: skew(x, y)
transform: skewX(x)
transform: skewY(y)
참고로 해당 속성은 도형 요소 뿐만 아니라 텍스트에서도 적용이 가능합니다.
#skewx:hover {
transform: skewX(30deg); /* x축 기준으로 30도 비틀기 */
}
#skewy:hover {
transform: skewY(15deg); /* y축 기준으로 15도 비틀기 */
}
#skewxy:hover {
transform: skew(-25deg, -15deg); /* x축 기준으로 -25도, y축 기준으로 -15도 비틀기 */
}
h1 {
width:500px;
height:80px;
background-color:#222;
color:#fff;
font-weight:bold;
line-height: 80px;
text-align: center;
transform: skewX(30deg); /* x축 기준으로 30도 비틀기 */
}
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 2 (0) | 2023.08.28 |
|---|---|
| [CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 1 (0) | 2023.08.21 |
| [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 3 (0) | 2023.07.31 |
| [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2 (0) | 2023.07.27 |
| [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 1 (0) | 2023.07.17 |
