Transform
- html 요소를 회전, 크기 조절, 기울이기, 이동효과를 나타낼 때 사용한다
- 특수한 함수를 사용해서 나타낼수 있다.
/* x축(가로)으로 20px 이동 */
transform: translateX(20px);
/* y축(세로)으로 40px 이동 */
transform: translateY(40px);
/* x축(가로)으로 20px, y축(세로)으로 40px 이동 */
transform: translate(20px, 40px);
Transform 함수
translate - 이동하기
- translate(tx, ty) - 지정한 크기 만큼 x축, y축으로 이동한다.
- traslateX - 지정한 크기 만큼 x축으로 이동한다.
- traslateY - 지정한 크기 만큼 y축으로 이동한다.
.box1 {
transform: translate(10px, 10px);
}
scale - 확대, 축소하기
- scale(sx, sy) - 지정한 크기 만큼 x축과 y축으로 확대, 축소한다.
- scaleX(sx) - 지정한 크기 만큼 x축으로 확대, 축소한다.
- scaleY(sy) - 지정한 크기 만큼 y축으로 확대, 축소한다.
.box2 {
transform: scale(2, 0.5);
}
rotate - 회전하기
- rotate(각도) - 지정한 각도 만큼 +시계방향, -시계반대 방향으로 회전한다.
- rotateX(각도) - 지정한 각도 만큼 x축으로 회전한다.
- rotateY(각도) - 지정한 각도 만큼 y축으로 회전한다.
- rotateZ(각도) - 지정한 각도 만큼 z축으로 회전한다.
- 이때 입체감있게 표현하고 싶다면 부모요소에 perspective요소를 적용해야 한다.
.box3 {
transform: rotateZ(45deg);
}
.outline-box3 {
perspective: 50px; /* 원근감을 주는 속성 */
}
skew - 왜곡하기
- skew(ax, ay) - 지정한 각도만큼 x축과 y축으로 왜곡한다.
- skewX(ax) - 지정한 각도 만큼 x축으로 왜곡한다.
- skewY(ay) - 지정한 각도 만큼 y축으로 왜곡한다.
.box4 {
transform: skew(15deg, 20deg);
}
Transition
- 전환이라는 의미를 가지며 transition이 적용되면 속성 값이 변할때 부드럽게 전환할수 있도록 효과를 나타내는 것이라고 생각하면 된다.
Transition 속성
transition-property
- 어떤 속성에 트랜지션 효과를 줄것인지 지정한다.
- transition-property: <속성1>, <속성2>; 와 같이 사용할 수 있다.
- transition-property: all은 모든 속성을 지정하고 transition-property: none은 아무것도 지정하지 않는다.
transition-duration
- 트랜지션 효과를 몇 초동안 실행할 것인지 지정한다.
transition-delay
- 지정한 초 만큼 기다렸다가 실행할 때 사용한다.
transition-timing-function
- 트랜지션의 시작과 끝의 속도를 지정한다.
- linear - 트랜지션의 시작과 끝의 속도가 일정하다
- ease-in - 천천히 시작했다가 왼료될 때 속도가 증가한다
- ease-out - 빠르게 시작되고 완료될 때 속도가 감소한다.
- transition - 단축속성으로 위의 속성을 한꺼번에 표기 할 수 있다.
/* Transition */
.box1 {
/* transition-property: all; */
/* transition-duration: 1s; */
/* transition-delay: 1s; */
/* transition-timing-function: ease-out; */
transition: 2s 1s ease-out;
}
원본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transform, Transition</title>
<style>
body {
margin: 0;
padding: 0;
background-color: lightgray;
}
.outline,
.box {
width: 60px;
height: 60px;
}
.outline {
border: 3px solid yellow;
margin: 0 auto;
margin-top: 20px;
}
.box {
background-color: blue;
}
.box1 {
transform: translate(10px, 10px);
}
.box2 {
transform: scale(2, 0.5);
}
.box3 {
transform: rotateZ(45deg);
}
.outline-box3 {
perspective: 50px; /* 원근감을 주는 속성 */
}
.box4 {
transform: skew(15deg, 20deg);
}
/* Transition */
.box1 {
/* transition-property: all; */
/* transition-duration: 1s; */
/* transition-delay: 1s; */
/* transition-timing-function: ease-out; */
transition: 2s 1s ease-out;
}
.box1:hover {
width: 200px;
height: 200px;
background-color: red;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="outline">
<div class="box box1"></div>
</div>
<div class="outline">
<div class="box box2"></div>
</div>
<div class="outline outline-box3">
<div class="box box3"></div>
</div>
<div class="outline">
<div class="box box4"></div>
</div>
</body>
</html>
'스터디일지 > CSS' 카테고리의 다른 글
[CSS] 기본 익히기 PART 10 (0) | 2024.03.15 |
---|---|
[CSS] 기본 익히기 PART 9 (0) | 2024.03.15 |
[CSS] 기본 익히기 PART 7 (1) | 2024.03.15 |
[CSS] 기본 익히기 PART 6 (0) | 2024.03.14 |
[CSS] 기본 익히기 PART 5 (1) | 2024.03.14 |