CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성
CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다.
IE는 버전 10 이상부터 지원한다는 것에 주의합니다.
transform / rotate
- transform의 rotate로 요소를 회전시킬 수 있습니다.
문법
transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle )
- angle에는 각의 크기를 입력합니다.
- 단위는 deg, rad, grad, turn 등을 사용합니다.
- turn은 1회전, 즉 360deg를 의미합니다.
예제
- 마우스를 올렸을 때 회전합니다. 회전하는 과정을 보기 위해 transition 속성을 추가했습니다.
- 각이 양수인 경우 시계방향으로 회전합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb {
width: 100px;
height: 100px;
margin: 60px auto;
background-color: orange;
transition: all ease 1s;
}
.jb:hover {
transform: rotate( 45deg );
}
</style>
</head>
<body>
<div class="jb"></div>
</body>
</html>
- 각이 음수면 반시계 방향으로 회전합니다.
.jb:hover {
transform: rotate( -45deg );
}
- 각이 크게 하여 빙글빙글 돌게 하는 효과를 줄 수 있습니다.
.jb:hover {
transform: rotate( 720deg );
}
- rotateX는 가로를 축으로 하여 회전합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: rotateX( 180deg )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
- rotateY는 세로를 축으로 하여 회전합니다.
.jb-box:hover {
transform: rotateY( 180deg )
}
transform / translate
- transform의 translate로 요소를 이동시킬 수 있습니다.
문법
transform: translateX( 50px )
오른쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 왼쪽으로 이동합니다.
transform: translateY( 50px )
아래쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 위쪽으로 이동합니다.
transform: translate( 50px, 50% )
오른쪽으로 50px, 아래쪽으로 50% 이동합니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: translateX( 50px )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
.jb-box:hover {
transform: translateX( -50px )
}
.jb-box:hover {
transform: translateY( -50px )
}
.jb-box:hover {
transform: translate( 50px, 50% )
}
transform / scale
- transform의 scale로 요소를 확대 또는 축소할 수 있습니다.
- 1보다 큰 수는 확대, 1보다 작은 수는 축소입니다.
문법
transform: scale( 2.0 );
가로와 세로 모두 2배 확대합니다.
transform: scale( 2.0, 1.5 );
가로로 2배, 세로로 1.5배 확대합니다.
transform: scaleX( 2.0 );
가로로 2배 확대합니다.
transform: scaleY( 1.5 );
세로로 1.5배 확대합니다.
예제
- 마우스를 올렸을 때 확대됩니다. 그 과정을 보기 위해 transition 속성을 추가했습니다.
- 마우스를 올리면 가로로 1.5배 확대합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: scaleX( 1.5 )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
- 세로로 1.5배 확대합니다.
.jb-box:hover {
transform: scaleY( 1.5 )
}
- 가로 세로 모두 1.5배 확대합니다.
.jb-box:hover {
transform: scale( 1.5 )
}
- 가로로 2.0배, 세로로 1.5배 확대합니다.
.jb-box:hover {
transform: scale( 2.0, 1.5 )
}
transform / skew
- transform의 skew로 요소를 비틀 수 있습니다.
문법
transform: skewX( 30deg );
가로 방향으로 30도 비틉니다.
transform: skewY( 30deg );
세로 방향으로 30도 비틉니다.
transform: skewX( 30deg, 60deg );
가로 방향으로 30도, 세로 방향으로 60도 비틉니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: skewX( 30deg )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
.jb-box:hover {
transform: skewY( 30deg )
}
.jb-box:hover {
transform: skew( 30deg, 60deg )
}
Related Posts
CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성
align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성
transition transition은 속성을 서서히 변화시키는 속성입니다. transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다. IE는 버전 10부터 지원합니다. 문법 transition: property timing-function duration delay | initial | inherit property : transition을 적용시킬 속성을 정합니다. transition-property를 참고하세요. timing-function : transition의 진행 속도를 정합니다. transition-timing-function를 참고하세요. duration : transition의 총 시간을 정합니다. transition-duration을 참고하세요. delay : transition의 시작을 연기합니다. transition-delay를 참고하세요. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 ...
CSS / linear-gradient - 선형 그라데이션 효과 만들기
linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 기본 문법 linear-gradient( direction, color1, color2, …, color3 ) direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 ...
CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성
개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit ...
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법
inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...
반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...
CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이
CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em - 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em; 은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다. 간단한 예제를 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...