728x90
반응형
transform 사용하기
transform:roate(회전정도 값 deg)
transform: rotate(180deg);transform: traslateX(이동 값) / traslateY(이동 값) / traslateZ(이동 값)
transform: translateX(10px);
transform: translateY(10px);
transform: translateZ(10px);
translate(X,Y,Z)를 하면 값이 동시에 적용되지 않는다
값을 동시에 적용받아 위치를 이동하고 싶은 경우에는
transform: translate3d(X이동값, Y 이동값, Z이동값) 을 사용해서 이동 시켜야한다
transform: translate3d(60px, 10px, 30px);
transform: scale(크기의 변화 정도)
transform: scale(2);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="animation_sass.css" rel="stylesheet" />
</head>
<body>
<div class="menu-text-title">
<h4>Base</h4>
<h1>Rotate</h1>
<h2>TranslateX</h2>
<h3>Scale</h3>
</div>
</body>
</html>.menu-text-title h1 {
border: 1px solid red;
transform: rotate(180deg);
}
.menu-text-title h2 {
border: 1px solid red;
transform: translateX(10px);
}
.menu-text-title h3 {
border: 1px solid red;
transform: scale(0.5);
}
.menu-text-title h4 {
border: 1px solid red;
}/*# sourceMappingURL=animation_sass.css.map */728x90
반응형
'PROGRAMING📚 > WEB📑' 카테고리의 다른 글
| [WEB] Javascript를 이용해서 html 글 변경 및 폰트 사이즈 변경하기 (0) | 2023.09.11 |
|---|---|
| [WEB]HTML, @keyframes 로 animaiton 만들기 (0) | 2023.09.06 |
| [HTML]HTML 안에 Video, Audio 적용하는 방법 (0) | 2023.09.06 |
| [HTML]SASS, @use 문법 (0) | 2023.09.06 |
| [HTML]Sass, @Mixin 사용하기 (1) | 2023.09.05 |
댓글