반응형
css 스타일로 변환 효과 주기
네 안녕하세요, 이번 포스팅에서는 css를 이용해서 변환 효과를 주는 방법에 대하여 알아보도록 하겠습니다.
변환 효과는 css가 지원하는 애니메이션 기능 중의 하나입니다.
우리가 기본 css 외에 여러 사이트에서 애니메이션 효과를 가져와서 주는 것도 css로 표현이 가능한 것들이 있어서
애니메이션 제어에 대해서는 잘 알고 계시면 좋습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 변환 효과 주기 - ,transform 프로퍼티 사용
변환은 다른 두 가지 효과를 주는 것 보다 만들기 쉽습니다.
그냥 transform 프로퍼티를 이용하여 제어를 하면 됩니다.
사용 방법은 아래와 같습니다.
transform : rotate(20deg); /* 시계 방향으로 20도 회전*/이런 식으로 사용을 합니다.
그럼 이걸 간단한 코드로 구현해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변환</title>
<style>
div {
display : inline-block;
padding : 5px;
color : white;
background : olivedrab;
}
div#rotate:hover{ transform : rotate(20deg); }
</style>
</head>
<body>
<h3>변환</h3>
<div id="rotate">안녕하세요</div>
</body>
</html>이제 결과 영상을 한 번 보도록 하겠습니다.
반응형
이렇게 변환을 시킬 수 있습니다.
여기까지 css로 변환 효과를 주는 방법에 대해 알아보았습니다.
다음 포스팅에서는 다양한 transform 프로퍼티에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css 스타일로 전환 효과 주기 (0) | 2023.05.22 |
|---|---|
| css 스타일로 애니메이션 주기 (0) | 2023.05.22 |
| css 폼 요소에 마우스 처리 하기 (0) | 2023.05.15 |
| css 폼 요소 테두리 꾸미기 (0) | 2023.05.08 |
| css 폼 요소에 스타일 입히기 (0) | 2023.05.08 |
댓글