-
[CSS] transform속성, 트랜지션, 애니메이션html, css, js 2023. 2. 17. 14:23
transform과 변형 함수
CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야한다.
transform: 함수웹 요소를 이동시키는 변형 함수는 translate
예를들어 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자. photo를 정의하면 다음과같다.
.photo {transform: translate(50px,100px);}2차원 변형과 3차원 변형
- 2차원변형은 웹 요소를 평면에서 변형한다. x,y축 수평방향으로 이동하거나 수직방향으로 왜곡하는식
- 3차원변형은 x,y,z축 z축은 앞뒤로 이동하며 보는사람쪽으로 다가올수록 커지고 뒤로갈수록 작아짐
2차원 변형 함수
3차원 변형 함수
웹 요소 이동시키는 translate() 함수
translate() 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 겨리를 지정하면 해당 요소가 지정한 크기만큼 이동함.
transform: translate(tx,ty) : x축으로 tx, y축으로 ty만큼 이동. tx,ty2가지 값을 사용하지만 ty값이 주어지지 않으면 0으로 간주 transform: translate3d(tx,ty,tz) : x축으로 tx y축으로 ty z축으로 tz만큼 이동 transform: translateX(tx) : x축으로 tx만큼 이동 transform: translateY(ty) : y축으로 ty만큼 이동 transform: translateZ(tz) : z축으로 tz만큼 이동translate() 함수를 이용해 사용자가 도형 위로 마우스 포인터를 올려놓으면 x축 또는 y축으로 이동하고 , x축y축으로 동시에 이동하는 예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Transform:translate</title> <style> #container { width:800px; height:200px; margin:20px auto; } .origin { width: 100px; height: 100px; border: 1px solid black; float: left; margin: 40px; } .origin > div { width:100px; height:100px; background-color:orange; } #movex:hover { transform: translateX(50px); /* x축으로(가로) 50px 이동 */ } #movey:hover { transform: translateY(20px); /* y축으로(세로) 20px 이동 */ } #movexy:hover { transform: translate(10px, 20px); /* x축으로(가로) 10px, y축으로(세로) 20px 이동 */ } </style> </head> <body> <div id="container"> <div class="origin"> <div id="movex"></div> </div> <div class="origin"> <div id="movey"></div> </div> <div class="origin"> <div id="movexy"></div> </div> </div> </div> </body> </html>요소를 확대 축소하는 scale() 함수
translate()함수 이용법과 동일함, 괄호 안의 값(sx,sy,sz)가 1보다 크면 확대되고 1보다 작으면 축소
transform: scale(sx,sy): x축으로 sx만큼 y축으로 sy만큼 확대한다. 값이 하나뿐일 경우에는 x,y 같은 값을 적용한다요소를 회전시키는 rotate() 함수
rotate()함수는 2차원과 3차원 회전에서 모두 사용할수있다.
2차원 rotate()함수
- rotate()함수에서 지정할수있는 각도 값은 일반적인 각도, 혹은 래디안을 사용한다. 회전각도가 양수일 경우 오른쪽으로 회전하고 음수일경우 왼쪽으로 회전한다.
- 2차원에서 사용할때는 각도만 지정하면된다.
- transform: rotate(40deg)의 경우 오른쪽으로 40도 회전, transform: rotate(-40deg)의 경우 왼쪽으로 40도 회전
3차원 rotate()함수
- translate()함수 이용법과 동일함
rotate()함수를 사용할떄 perspective 속성
- 3차원변형에서 사용
- 원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대방향으로 잡아당기거나 밀어내 원근감을 표현한다.
- perspective에서 사용하는 값은 0 보다 커야하며, 원래 있던 위치에서 사용자가 있는쪽으로 얼마나 이동하는지 px로 나타냄 값이 클수록 사용자로부터 멀어짐
- 이때 주의해야할점은 변형하는 요소가 아니라 변형하는 요소의 부모요소에 정의해야한다는 점이다.
다음 예제는 x축을 기준으로 이미지를 회전시켰을때와 x축을 기준으로 회전시키는 동시에 perspective로 원근감을 주었을때를 비교한것
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Transform</title> <style> .origin{ width:152px; height:180px; border:1px solid black; margin:30px; float:left; } .origin > div { width:152px; height:180px; } .rotatex:hover { transform: rotateX(50deg); /* x축으로 50도 회전 */ } #pers { perspective:300px; /* 원근감 추가 */ } </style> </head> <body> <h4>원본 이미지</h4> <div class="origin"> <img src="./book-icon.png" alt=""> </div> <div class="origin"> <div class="rotatex"> <img src="./book-icon.png" alt=""> </div> </div> <div class="origin" id="pers"> <div class="rotatex"> <img src="./book-icon.png" alt=""> </div> </div> </body> </html>transition: all 3s; -> 3초동안 회전하도록 트랜지션을 적용할수도있다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Transform</title> <style> #container{ width:800px; margin:20px auto; } .origin { width: 100px; height: 100px; margin: 40px; float: left; border: 1px solid black; perspective: 200px; /* 원근감 추가 */ } .origin > div { width:100px; height:100px; background-color:orange; transition:all 3s; /* 3초 동안 회전하도록 트랜지션 적용 */ } #rotatex:hover { transform: rotateX(55deg); /* x축으로 55도 회전 */ } #rotatey:hover { transform: rotateY(55deg); /* y축으로 55도 회전 */ } #rotatez:hover { transform: rotateZ(55deg); /* z축으로 55도 회전 */ } #rotatexyz:hover { transform: rotate3d(2.5, 1.2, -1.5, 55deg); /* x,y,z축으로 55도 회전 */ } </style> </head> <body> <div id="container"> <div class="origin"> <div id="rotatex"></div> </div> <div class="origin"> <div id="rotatey"></div> </div> <div class="origin"> <div id="rotatez"></div> </div> <div class="origin"> <div id="rotatexyz"></div> </div> </div> </body> </html>요소를 비틀어 왜곡하는 skew()함수
지정한 각도만큼 요소를 비틀어 왜곡함
transfrom: skew(x각도,y각도): 첫번쨰 값은 x축을 기준으로 비트는각도이고, 두번째값은 y축을 기준으로 비트는각도 두번째 값이 주어지지 않으면 y축 각도를 0으로 간주함 transform: skewX(각도) transform: skewY(각도)skew함수를 적용하면 이미지를 사용하지 않고도 도형의 형태를 만들 수 있다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Transform</title> <style> #container{ width:600px; margin:20px auto; } h1 { width:500px; height:80px; background-color:#222; color:#fff; font-weight:bold; line-height: 80px; text-align: center; transform: skewX(15deg); /* x축 기준으로 15도 비틀기 */ } </style> </head> <body> <div id="container"> <h1>CSS 변형 함수 익히기</h1> </div> </body> </html>
#트랜지션 알아보기
트랜지션이란 웹 요소의 배경색을 바꾸거나, 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말한다.
웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 트랜지션이라고한다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Transition</title> <style> div { width: 100px; height: 100px; float: left; margin: 30px; } .bg-tr{ background-color:skyblue; transition:all ease 1s; } .bg-tr:hover { background-color:blue; } .border-tr { background-color: orange; border: 3px solid black; transition: all linear 1.5s; } .border-tr:hover { border: 3px solid red; border-radius: 50%; } </style> </head> <body> <div class="bg-tr"> </div> <div class="border-tr"></div> </body> </html>트랜지션과 속성
transition-property 트랜지션의 대상을 지정 transition-duration 트랜지션을 실행할 시간 지정 transition-timing-function 트랜지션의 실행 형태를 지정 transition-delay 트랜지션 지연시간을 지정 transition 위 모든 속성값 한번에 지정트랜지션의 대상을 지정하는 transition-property
transition속성에서 사용할수있는 속성값
- all : all값을 사용하거나, transition-property를 생략할경우 요소의 모든 속성이 트랜지션 대상이됨. 기본값 예를 들어 위 예제처럼 .bg-tr에 transition:all로 설정하면 .bg-tr :hover 에있는 모든 속성들이 트랜지션을 적용할 대상이되는것이다.
- none : 트랜지션을 하는 동안 아무 속성도 바뀌지 않음
- 속성 이름 : 트랜지션 효과를 적용할 속성을 지정함, 속성이 여럿일경우 쉼표로 구분하여 나열함
트랜지션의 진행 시간을 지정하는 transition-duration
- 지정할수있는 단위는 초 또는 밀리초단위이다.
- 트랜지션의 대상 속성이 여러개라면 진행 시간도 쉼표로 구분해서 여러 개 지정할 수 있다.
- 음숫값을 지정하면 0 으로 간주한다.
트랜지션의 속도 곡선을 지정하는 transition-timing-function
트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만든다.
속도 곡선은 미래 정해진 키워드나 베지에 곡선을 이용한다.
- ease: 처음에는 천천히 시작하고 점점빨라지다가 마지막엔 천천히 끝냄, 기본값
- linear : 시작부터 끝까지 똑같은 속도로 진행
- ease-in : 느리게 시작
- ease-out : 느리게 끝
- ease-in-out : 느리게 시작하고 느리게 끝
- cubic-bezier(n,n,n,n) : 베지에 함수를 정의해 사용 n값은 0~1사이에만 사용가능함
트랜지션의 지연 시간을 설정하는 transition-delay
트랜지션 효과를 언제부터 시작할것인지 설정한다.
사용할수있는 값은 초, 밀리초이며 기본값은 0
트랜지션 속성을 한꺼번에 표기하는 transition 속성
속성값을 작성하는 순서는 상관없음, 다만 시간값이 2개있다면 앞에오는 시간값을 transition-duration으로 뒤에오는 시간값을 transition-delay로 간주함
마우스를 올리면 상품정보를 표시해주는 예제
#container { width:1000px; margin:20px auto; } h1 { text-align:center; } .prod-list { list-style:none; padding:0; } .prod-list li { float: left; padding: 0; margin: 10px; overflow: hidden; position: relative; } .prod-list img { margin:0; padding:0; float:left; z-index:5; } .prod-list .caption { position: absolute; top:200px; /* 기준 위치보다 200px 아래로 */ width:300px; height:200px; padding-top:20px; background:rgba(0,0,0,0.6); /* 반투명한 검정 배경 */ opacity:0; /* 화면에 보이지 않게 */ transition: all 0.6s ease-in-out; /* 나타날 때 부드럽게 트랜지션 추가 */ z-index:10; /* 다른 요소보다 위에 있도록 */ } .prod-list li:hover .caption { opacity: 1; /* 설명글이 화면에 보이게 */ transform: translateY(-200px); /* 설명글이 위로 200px 이동하게 */ } .prod-list .caption h2, .prod-list .caption p { color: #fff; text-align: center; }<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS3 애니메이션</title> <link rel="stylesheet" href="./poster.css"> </head> <body> <div id="container"> <h1>신상품 목록</h1> <ul class="prod-list"> <li> <img src="./HTML.jpeg"> <div class="caption"> <h2>상품 1</h2> <p>상품 1 설명 텍스트</p> <p>가격 : 12,345원</p> </div> </li> <li> <img src="./HTML.jpeg"> <div class="caption"> <h2>상품 2</h2> <p>상품 2 설명 텍스트</p> <p>가격 : 12,345원</p> </div> </li> <li> <img src="./HTML.jpeg"> <div class="caption"> <h2>상품 3</h2> <p>상품 3 설명 텍스트</p> <p>가격 : 12,345원</p> </div> </li> </ul> </div> </body> </html>
#애니메이션 알아보기
CSS 애니메이션에서 사용하는 animation
- js를 사용하지 않고 웹 요소에 애니메이션을 추가할 수 있다. animation속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다.
- 키프레임은 @keyframes 속성으로 정의하고, animation속성과 그 하위 속성을 이용해서 애니메이션의 실행시간이나 반복 여부 등을 결정한다.
애니메이션의 지점과 이름을 설정하는 @keyframes , animation-name 속성
- 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용한다.
- 또한 웹 문서에서는 애니메이션을 여러개 지정할 수 있으므로 이름을 이용해 애니메이션을 구별해야한다.
- animation-name: <키프레임 이름> |none
애니메이션의 실행 시간을 지정하는 aniamtion-duration
사용할수있는 값은 s, ms단위이다. 기본값은0이므로 속성값을 지정하지 않으면 애니메이션은 실행되지 않는다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Animation</title> <style> #container{ width:500px; margin:20px auto; } .box{ width: 100px; height: 100px; float:left; margin:50px; } #box1 { background-color: #4cff00; border: 1px solid transparent; animation-name: shape; /* 애니메이션 지정 */ animation-duration: 3s; /* 애니메이션 실행 시간 */ } #box2 { background-color: #8f06b0; border: 1px solid transparent; animation-name: rotate; /* 애니메이션 지정 */ animation-duration: 3s; /* 애니메이션 실행 시간 */ } @keyframes shape { /* shape 애니메이션 정의 */ from { border: 1px solid transparent; /* 1px짜리 투명한 테두리 */ } to { border: 1px solid #000; /* 검정색 테두리 */ border-radius: 50%; /* 테두리를 둥글게 */ } } @keyframes rotate { /* rotate 애니메이션 정의 */ from { transform:rotate(0deg) /* 시작은 0도에서 */ } to { transform: rotate(45deg); /* 45도까지 회전 */ } } </style> </head> <body> <div id="container"> <div class="box" id="box1"></div> <div class="box" id="box2"></div> </div> </body> </html>애니메이션 방향을 지정하는 animation-direction
위 예제에서 보다시피 애니메이션은 기본적으로 keyframes에서 정의한 from -> to 순서로 진행하는데,
진행 방향을 바꾸는데 쓰인다.
- normal : from -> to 진행
- reverse : to ->from
- alternate : 홀수번째는 normal 짝수번째는 reverse로 진행 (첫번째 실행에선 from->to로 두번째 실행에선 to->from으로 ...)
- alternate-reverse : 홀수번째는 reverse로 짝수번째는 normal로 진행
반복 횟수로 지정하는 animation-iteration-count 속성
- 숫자 : 애니메이션 반복횟수
- infinite : 무한반복
#box1 { background-color: #4cff00; border: 1px solid transparent; animation-name: shape; /* 애니메이션 지정 */ animation-duration: 3s; /* 애니메이션 실행 시간 */ animation-iteration-count:infinite; }애니메이션 속도 곡선을 지정하는 animation-timing-function 속성
트랜지션에서 배운 transition-timing-function과 속성값 동일
애니메이션 속성을 한꺼번에 표기하는 animation 속성
- 지금까지 배운것들 한꺼번에 표기할수있다.
- 주의할점은 animation-duration 속성을 반드시 표기해야 한다는 것!
- 쉼표로 구분하여 둘 이상의 애니메이션을 실행할 수도 있음
다음예제는 rotate 회전하는 애니메이션과, 배경색이 바뀌는 애니메이션이 쉼표로 연결되어 한번에 실행되는 예제이다.
alterante속성이 있어 반대반향으로도 실행된다.
from으로 시작해서 50%인 중간지점을 거쳐 to로 최종적으로 실행된다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Animation</title> <style> .box { width: 100px; height: 100px; margin: 60px auto; animation: rotate 1.5s infinite, background 1.5s infinite alternate; } @keyframes rotate { /* 0도 -> x축 -180도 회전 -> y축 -180도 회전 */ from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); } to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } } @keyframes background { /* 배경색 빨강 -> 초록 -> 파랑 */ from { background-color: red; } 50% { background-color: green } to { background-color: blue; } } </style> </head> <body> <div class="box"> </div> </body> </html>마무리문제 1
트랜지션을 이용해 10장에서 만들었던 메뉴의 색상이 서서히 바뀌도록 설정한다.
활성화되지않은 모든 li 태그에 적용하는것이므로 .top-menu li a:link에 트랜지션 추가해주면된다.
<!DOCTYPE HTML> <html lang="ko"> <head> <meta charset="UTF-8"> <title>연습문제 1</title> <style> * { box-sizing: border-box; } .top-menu { margin:50px auto; padding:0; list-style:none; width:605px; height:35px; box-shadow:0 3px 4px #8b8b8b; background-color:#dadada; } .top-menu li { float:left; border-right:1px solid #929292; } .top-menu li a:link{ color:black; text-decoration:none; text-align:center; display:block; width:100px; height:35px; line-height: 35px; transition: 0.5s ease-in; } .top-menu li:last-child { border-right:none; } .top-menu li:not(:last-child) a:hover { background-color:#555; color:#fff; } .top-menu Li:last-child a:hover { background-color:#b30000; color:#fff; } </style> </head> <body> <nav> <ul class="top-menu"> <li><a href="#">메뉴1</a></li> <li><a href="#">메뉴2</a></li> <li><a href="#">메뉴3</a></li> <li><a href="#">메뉴4</a></li> <li><a href="#">메뉴5</a></li> <li><a href="#">메뉴6</a></li> </ul> </nav> </body> </html>마무리문제 2
@keyframes를 이용해서 삽입한 이미지를 애니메이션으로 만들어보자
1. from 50% to 3구간으로 나누어서 perspective속성을 통해 200px정도의 깊잇값의 원근감을 주었다.
2. 각도는 rotateY함수를 이용하였다. 각도는 0도부터 180도까지
3. 애니메이션 이름을 teddy-bear로 정해주고 animation 속성을 이용하여 img태그에 애니메이션 효과를 넣어주었음
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>연습문제 2</title> <style> #container { width:200px; margin:30px auto; } img { border:1px solid #ccc; border-radius:50%; box-shadow: 5px 5px 30px 2px #000; animation:teddy-bear 2.5s infinite; /* rotateBear 애니메이션 2.5초 동안 실행. 무한 반복 */ } @keyframes teddy-bear{ from{ transform: perspective(200px) rotateY(0deg); } 50%{ transform: perspective(200px) rotateY(-180deg); } to{ transform: perspective(200px) rotateY(-360deg); } } </style> </head> <body> <div id="container"> <img src="./HTML.jpeg" alt="곰인형 사진"> </div> </body> </html>'html, css, js' 카테고리의 다른 글
[js] js 사용방법 (0) 2023.02.20 [CSS] 반응형 웹, 미디어 쿼리 (0) 2023.02.19 [CSS] 고급 선택자(연결선택자,속성선택자,가상클래스 선택자) (0) 2023.02.16 [CSS] 배경색 꾸미기(background, 그러데이션) (0) 2023.02.15 [CSS] 박스모델(content,padding,border,margin) (0) 2023.02.14