전환 효과 속성이나 애니메이션 속성
-> 요소의 속성을 변하게 하는데 주 목적이 있는 속성들
요소의 크기를 변경하거나 위치를 이동하거나, 회전시키는 것처럼 요소 자체를 변하게 하려면 변형(transform) 효과 속성을 사용 해야 함
transform 속성
요소에 특정 변형 효과를 지정할 수 있음
transform:<함수>;| 함수 | 설명 |
|---|---|
| translate(x,y) | 요소를 현재 위치에서 x,y축 만큼 이동 |
| translateX(n) | 요소를 현재 위치에서 n만큼 x축 만큼 이동 |
| translateY(n) | 요소를 현재 위치에서 n만큼 y축 만큼 이동 |
| scale(x,y) | 요소를 x,y축 만큼 확대 or 축소 |
| scaleX(n) | 요소를 n만큼 x축으로 확대 or 축소 |
| scaleY(n) | 요소를 n만큼 y축으로 확대 or 축소 |
| skew(xdeg, ydeg) | x,y축으로 xdeg,ydeg 만큼 기울임 |
| skewX(deg) | 요소를 deg만큼 x축 만큼 기울임 |
| skewY(deg) | 요소를 deg만큼 y축 만큼 기울임 |
| rotate(deg) | 요소를 deg 만큼 회전시킴 |
<style>
div{
width:100px;
height:100px;
background-color:red;
}
</style>
<body>
<div></div>
</body>2차원 좌표 이동하기(translate())
현재 위치에서 일정 거리 만큼 이동 하고 싶을 때 사용
-> 한방향으로 이동하길 원한다면 translateX(n), translateY(n)
값을 양수로 주면 -> x축은 오른쪽으로, y축은 아래로 이동
왼쪽이나 위로 이동하고 싶다면 값을 음수로 주면 됨
div:hover{
/* 오른쪽으로 100, 아래로 200 */
transform:translate(100px, 200px);
}
2차원 확대 또는 축소(scale())
div:hover{
transform:scaleX(2);
transform:scaleY(2);
or
transform:scale(2,2);
}
2차원 기울이기(skew())
div:hover{
transform:skew(30deg, 30deg);
}
2차원 회전하기(rotate())
양수값을 넣으면 오른쪽으로 회전, 음수 값을 넣으면 왼쪽으로 회전
<style>
.container{
border:1px solid black;
display:inline-block;
margin:20px;
}
.box{
width:100px;
height:100px;
background-color:red;
}
.box:hover{
transform:rotate(30deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
transform-origin 속성
앞선 rotate() 함수는 요소가 회전할 때 요소의 중심을 기준으로 회전
-> 이 처럼 변형 관련 속성값들은 변형을 시작하는 기준점이 있음
-> 기본적으론 기준점이 중심이지만, 기준점을 바꾸게 된다면 변형 효과가 다르게 나타날 것
transform-origin:<x축 위치><y축 위치>
.box:hover{
transform:rotate(30deg); /* 오른쪽으로 회전 */
transform-origin:top left; /* 왼쪽 위 모서리를 기준점으로 지정 */
}
Journey for Backend Developer