110일차(1)/CSS(9) : 3차원 컨텐츠 만들기(2)
- Transform : 개체를 변화시키는 것 (회전, 크기 조절, 비틀기 등...)
- Transition : 변화시킬 때 중간 변환과정을 보여주는 것 (애니메이션)
- border 속성을 경계선의 굵기(px), 스타일(실선), 색상 지정 등을 따로따로 쓸 수 있는 것처럼,
linear도 하나하나씩 따로 작성할 수 있다.
- property : 트랜지션을 적용할 수 있는 모든 요소에다가 적용하라는 뜻!
- duration : 변환 과정을 얼마 동안 보여줄 것인가(초 단위)
- timing function : 변환할 때 중간 과정을 보여주기(보여주는 방식)
- ease-in-out : 처음에도 천천히 나중에도 천천히 움직이며 변화함
- 웹에서 숨겨져있던 메뉴 창이 클릭시 부드럽게 나오고 들어가는 것도 ease-in-out transition을 사용한 것이다.
- transition의 속성. all 해도되지만 transform에다가 적용한다는 의미로 transform을 적어줌
- 평행이동(X,Y축), 회전, 확대 작업 (일정 시간 여유를 갖고 진행)
- transform을 하되 0.4초동안, ease-out 이라는 timing function을 가지고 한다는 의미!
- transform에도 transition을 적용할 수 있다.
- Transform은 이동, 회전, 확대, 축소 등을 많이 사용한다.
Step02_Transform2
<!DOCTYPE html>
<html lang="en">
<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>Step02_Transform2</title>
<style>
.wrapper{
width: 300px;
height: 300px;
border: 1px solid blue;
margin: 0 auto;
/* 넘친 contents를 어떻게 할지 결정하기 */
overflow: hidden;
}
#one{
width: 300px;
height: 300px;
background-color: aqua;
transform: translateX(-300px);
transition: transform 0.4s ease-out;
}
</style>
</head>
<body>
<div class="container">
<h3>Transform 예제</h3>
<div class="wrapper">
<div id="one">one</div>
</div>
<button id="showBtn">보이기</button>
<button id="hideBtn">숨기기</button>
</div>
<!-- jquery 로딩 -->
<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous"></script>
<script>
// document.querySelector("#showBtn").addEventListener("click", ()=>{
// document.querySelector("#one").style.transform="translateX(0px)";
// });
// document.querySelector("#hideBtn").addEventListener("click", ()=>{
// document.querySelector("#one").style.transform="translateX(-300px)";
// });
//위의 동작을 jquery를 활용하면 아래와 같다.
$("#showBtn").on("click", ()=>{
$("#one").css("transform", "translateX(0px)");
});
$("#hideBtn").on("click", ()=>{
$("#one").css("transform", "translateX(-300px)");
});
</script>
</body>
</html>
- width를 결정하고 margin 0 auto 를 적용하면 가운데 정렬이 된다.
- 원래 위치에서 왼쪽으로 300px 만큼 평행이동시켜 봄
- transform 으로 이렇게 옆으로 빠져오게 만들었다.
- 자식 div가 밖으로 나가버린 것이다.
- overflow: hidden; : 부모요소보다 넘치는 부분을 숨기는 것
- overflow 는 디폴트가 visible이다. 넘치더라도 보여주겠다는 것!
- overflow: scroll; : 부모요소보다 넘치는 부분은 스크롤바 형태로 움직여 볼수있게 하는 것
- 이 넘치는 컨텐츠를 숨겼다가 이동시켜서 보여줄 수 있을까?
- transform을변경하는 javascript문을 작성한다.
- id가 one인 요소의 css속성에 transform을 추가한다.
- 그러면 버튼 클릭시 박스가 보이게 된다.
transition: transform 0.4s ease-out;
- 이 움직임에 transition을 적용하려면 해당 요소의 style에 이 속성을 추가해주면 된다.
- transform이 적용될 때 transition을 적용한다는 의미!
- 이 적용시간이 너무 느리면 사이트가 답답해보일 수 있다. 0.5초 내외가 좋다.
- 슬라이더를 사용하면(여러개의 페이지 중에 하나씩만 보여준다) 돌면서 컨텐츠를 하나씩 보여주기가 가능하다.
- 현재 3번만 보이고 1,2는 넘쳐있어서 보이지 않는 상태!
- 이 전체를 감싸고 있는 div를 컨텐츠의 폭만큼 평행이동시킨다.
- 끝까지 가면 처음부터 되감아서 플레이 시키기, 클릭하지 않아도 자동으로 움직이게 만들기 등등.. 전부 자바스크립트로 적용할 수 있다.
- jquery는 좀 지났지만 아직도 사용하는 곳이 상당히 있다.
- 유지보수시에 많이 사용하게 될 수 있다.
- jquery cdn : https://releases.jquery.com/
<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous"></script>
- jquery 버전 3점대로 받아서 추가해봄!
- .css : css를 적용하는 코드
- .css() 안에 순서대로 속성명, 속성 value값을 적어주면 된다.
- jquery는 적용 대상을 선택하는 방식, 이벤트를 적용하는 방식에 차이가 있다.
- 코딩량을 줄일 수 있다는 장점이 있다. (많이 사용하지는 않지만...)
Step03_Animation.html
<!DOCTYPE html>
<html lang="en">
<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>Step03_Animation.html</title>
<style>
#puff{
border: 1px solid palevioletred;
border-radius: 50%;
}
/* id가 puff인 요소에 마우스가 hover 되었을때 rotateAni 라는 이름의 keyframe 적용하기 */
#puff:hover{
/* 키프레임 종류, 수행시간, 반복횟수, 타이밍 함수, 왕복여부 */
animation: rotateAni2 3s 2 ease-out alternate;
}
/* animation keyframe 정의하기 */
@keyframes rotateAni {
from{
background-color: aquamarine;
transform: rotate(0deg);
}
to{
background-color: firebrick;
transform: rotate(360deg);
}
}
@keyframes rotateAni2 {
0% {
background-color: aquamarine;
transform: rotate(0deg);
}
100% {
background-color: firebrick;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h3>Animation 테스트</h3>
<img src="images/puff4.png" id="puff">
</div>
</body>
</html>
- 마우스를 올렸을때 애니메이션 효과를 주고 싶다면
@keyframes + 식별자(id) 를 넣어서 만들어준다.
- from 은 시작 상태, to 는 끝 상태를 가리킨다.
- 0부터 360까지 쭉 진행하면 회전하는 모양이 된다.
- 마우스가 hover 되었을 때 적용할 애니메이션!
#puff:hover{
animation: rotateAni 3s ease-out;
}
- 마우스를 올리면 회전한다.
- 반복횟수 infinite로 회전을 무한반복시킬 수도 있다.
- alternate는 왕복해서 한다. from에서 to로, to에서 from으로!!
- from to가 아니라 0% 100% 라고 지정할 수도 있다.
- 그러면 서서히 퍼센티지에 따라 진행된다.
- 마우스 hover 시점이 아닌 특정 시점에 애니메이션이 실행되게 하려면
Step03_Animation2.html
<!DOCTYPE html>
<html lang="en">
<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>Step03_Animation2.html</title>
<style>
.move{
animation: moveAni 3s 1 ease-out;
}
@keyframes moveAni {
0%{
transform: translateX(0px) rotate(0deg);
}
100%{
transform: translateX(500px) rotate(180deg);
}
}
</style>
</head>
<body>
<div class="container">
<h3>animation 테스트</h3>
<button id="startBtn">시작</button>
<br>
<img src="images/redbird.png" id="bird">
</div>
<!-- jquery 로딩 -->
<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous"></script>
<script>
// //시작 버튼을 누르면 이미지에 moveAni 라는 키프레임이 적용되도록 해보세요.
// document.querySelector("#startBtn").addEventListener("click", ()=>{
// document.querySelector("#bird").classList.add("move");
// });
// //animation 적용이 끝나면 "animationend" 이벤트가 발생한다.
// document.querySelector("#bird").addEventListener("animationend", ()=>{
// //move 클래스 제거하기
// document.querySelector("#bird").classList.remove("move");
// });
//위의 동작을 jquery를 이용하면
$("#startBtn").on("click", ()=>{
$("#bird").addClass("move");
});
$("#bird").on("animationend",()=>{
$("#bird").removeClass("move");
})
</script>
</body>
</html>
- 아래 이미지에 키프레임을 적용시키기. 애니메이션 동작을 시킬 것이다.
- 처음에는 존재하지 않았지만 동적으로 추가도 된다.
- 하지만 이러면 여러번 누른다고 클래스가 추가되지 않는다. 이미 있어서..
- 애니메이션이 끝났을 때 이 클래스를 제거해주는 과정이 필요하다!
- 애니메이션이 끝났을 때 어떤 이벤트가 발생한다. animationend
- 애니메이션을 클래스를 통해서 적용시키고
- 검사 창에서 확인해보면 클래스가 추가되어 있다.
- 애니메이션이 끝나는 이벤트가 발생하면 클래스를 제거하는 코드를 넣어준다! 그러면 클릭시마다 여러번 적용할 수 있다.
- transition 도 종료되었을때 transitionend 라는 이벤트가 발생한다. 필요시 활용하면 된다.
- jQuery로 작성해보기
- jQuery를 사용하면 클래스 추가, 삭제가 간단하다.
- jQuery를 지금 많이 사용하지는 않지만, 기존에 만들어진 것을 유지보수할 일이 많을 수 있으니 잘 알아두기
- 3차원 transform 요소 만들기
Step04_3dTransform.html
<!DOCTYPE html>
<html lang="en">
<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>Step04_3dTransform.html</title>
<style>
.wrapper{
/* viewer와 object 사이의 거리 */
perspective: 500px;
/* viewer의 위치 */
perspective-origin: 50% 50%;
border: 1px solid blue;
}
.target{
margin: 0 auto;
width: 200px;
border: 1px solid salmon;
transform-style: preserve-3d;
/* x, y, z축이 교차하는 원점 설정 */
transform-origin: 50% 50%;
transition: transform 0.4s ease-out;
}
.target img{
max-width: 100%;
}
#one:hover{
transform: rotateX(45deg);
}
#two:hover{
transform: rotateY(45deg);
}
#three:hover{
transform: rotateZ(45deg);
}
</style>
</head>
<body>
<div class="container">
<h3>3d transform 테스트</h3>
<!-- 3d 공간을 만들 wrapper div -->
<div class="wrapper">
<!-- 3d 공간 안에서 3d transform 을 적용시킬 아이템-->
<div class="target" id="one">
<img src="images/image1.png"/>
</div>
</div>
<div class="wrapper">
<!-- 3d 공간 안에서 3d transform 을 적용시킬 아이템-->
<div class="target" id="two">
<img src="images/image1.png"/>
</div>
</div>
<div class="wrapper">
<!-- 3d 공간 안에서 3d transform 을 적용시킬 아이템-->
<div class="target" id="three">
<img src="images/image1.png"/>
</div>
</div>
</div>
</body>
</html>
* 3D transform guide : https://blog.logrocket.com/the-noobs-guide-to-3d-transforms-with-css-7370aafd9edf/
- 3차원 컨텐츠를 만들려면 3차원 좌표축에 대한 이해가 있어야 한다.
- 가로x축, 세로y축이 있으면 그 원점에서 나를 향하는 축이 z 축이라고 생각하면 된다.
- x,y축으로 만들어진 스크린이 있다고 생각하기. 여기서 나를 향하는 것이 z축이다.
- div를 배치하고 z축 쪽으로 가져온다면 가까워진다. 즉 확대된다!
- transform:translateZ() 로 평행이동시킨 것과 같다.
- 반대로 z축의 반대방향으로 이동하면 나에게 보이는 div는 축소된다.
- 각각 x이동(좌우), y이동(상하), z이동(앞, 뒤로 이동)
- x축을 기준으로 회전시킨 것!
- 나에게서 가까워져서 윗부분은 길게 보이고, 아랫부분은 나에게서 멀어져서 짧게 보이는 것
- z축 회전은 도형 정가운데 점을 축으로 회전하는 것
- 축의 위치가 달라지면 똑같이 회전하더라도 모양은 달라 보인다.
- Perspective 의 개념 이해하기! 관찰자와 물건 사이의 거리를 설정하는 값을 말한다.
- 특정 거리에 div를 가져다 놓고 회전,평행 이동을 시킨다고 하면 거리가 가까울수록 왜곡이 심해진다.
- 3d transform을 만들 때 중요한 데이터이다.
- 이 거리를 적절하게 잡아야 3차원 효과가 잘 나타난다.
- 보통 웹브라우저에서는 500px 정도가 적당하다!
- 3번이 가장 높은 perspective 값을 적용한 것이다. 제일 멀다!
- 같은 각도로 회전시켜도 perspective가 크면(멀리서 보면) 크게 변화가 없게 보인다.
- 같은 정도?양의 transform을 하더라도 perspective 값에 따라 보이는 정도가 다르다!
.wrapper{
/* viewer와 object 사이의 거리 */
perspective: 500px;
/* viewer의 위치 */
perspective-origin: 50% 50%;
}
- 회전시킨 것을 어디서 쳐다보느냐에 따라 다르게 보일 것!
- 똑같은 3d변환을 한 요소를 바라보아도 관찰자가 어디에서 보느냐에 따라 모양이 전부 달라 보일 것이다.
- 이것이 perspective-origin 이다.
- 50% 50%; 는 정가운데에서 바라보는 것을 말한다.
- 라면박스를 열어서 바라본다고 생각해보자.
- 각각 약간 왼쪽에서 바라본 것, 정가운데에서 바라본 것, 약간 아래에서 바라본 것이다.
- 정가운데에서 바라본것이 50% 50%이다.
- 이 파란색이 3차원공간이다.
- 이 div (빨간색 박스) 를 가지고 transform할 예정!
- x축 기준으로 45도 돌린 것
- 마우스가 hover되었을 때 회전시키도록 한 것!
- transition을 적용하면 transform이 일어날 때 적용되어 변화가 0.4초 사이에 천천히 일어난다.
- perspective:100px (이전보다 가깝게) 적용한 테스트
- 왜곡이 이전보다 크게 일어난다.
- origin 을 10% 10% 위치에 둔 것. 가로 세로 비율에 맞추어 10%의 위치에 있다.
- origin의 위치를 옮기면 시선이 여기에 있으므로, 이렇게 시선이 있는 왼쪽으로 치우쳐서 왜곡된다.
- transform origin으 로 위치 조정, 원하는 곳으로 옮기기
- 원점이 위와 같으면 이렇게 움직인다. (0 위치에 둔 것)
- 다양한 원점을 테스트해보기!
- div 3개를 겹쳐놓고 transform 하면 이렇게 입체적인 효과를 낼 수 있다.
- 큐브 만들기도 div 6개를 일단 겹치게 해놓고 부모 div를 여기에 감싸서 정육면체로 만들 수 있다.
- 반복문을 돌면서 div들을 돌려서 구 형태(원형)로 만들 수도 있다.
'국비교육(22-23)' 카테고리의 다른 글
| 112일차(1)/CSS(11) : 3차원 컨텐츠 만들기(4) (1) | 2023.03.22 |
|---|---|
| 111일차(1)/CSS(10) : 3차원 컨텐츠 만들기(3) (0) | 2023.03.21 |
| 109일차(2)/CSS(8) : 3차원 컨텐츠 만들기(1) (0) | 2023.03.17 |
| 109일차(1)/Android App(73) : 모바일 갤러리 기능 구현(7) (0) | 2023.03.17 |
| 108일차(1)/Android App(72) : 모바일 갤러리 기능 구현(6) (0) | 2023.03.16 |