DAY #14
- 문제
👉 문제 바로가기
Byciclopter: Which side of the card do you want to use? Either drive or fly to work in the morning?
문제분석
일단 카드에 마우스 hover시 카드가 뒤집히는 모션이 나와야 한다.
앞면에 자전거가 둠칫둠칫 해야하고
뒷면에 헬기가 위아래로 움직여야 한다.
그리고!
앞면에 바닥(길)이 움직이는 모션과
뒷면에 바람이 움직이는 모션을 넣어주어야 한다.
(근데 이제 요소들의 너비와 애니메이션 지속시간은 랜덤으로) 😵
일단 카드 뒤집기 모션을 주기 위해 내가 참고한 사이트이다. 👉 카드뒤집기(플립)효과
여기서 사용되는 속성중 중요 속성들을 추려 보았다.
📝 perspective
- 3D 요소에 원근감을 표현할 때 사용할 픽셀 수를 설정합니다.
- 3D transform와 같이 자주 사용됩니다.
perspective 를 사용하지 않으면 translateZ 의 변화를 느낄수 없다.
perspective 의 숫자가 커질수록 멀리서 보는 느낌이 난다.
📝 transform-style: preserve-3d
- 자식 요소가 3D 공간에 배치되도록 지정합니다.
카드가 될 요소를 감싼 요소에 이 속성을 추가하면 된다.
📝 backface-visibility: hidden
- 요소의 뒷면을 보여줄 지 결정합니다.
말 그대로 요소의 뒷면을 안보이게 해주는 속성이다.
<div class="card">
<!-- 앞면 -->
<div class="front">
...
</div>
<!-- 뒷면 -->
<div class="back">
...
</div>
</div>이 속성을 왜 사용하냐! 만약 요소를 뒤집었을 때 뒷면이 보이게 되면,
앞, 뒷면 중 위에 보여지게 되는 요소에 가려져서 나머지 면이 아예 안보이게 된다.
그래서 꼭 hidden 처리 해주어야 함.
그 외 중요한 부분
뒷면에 transform: rotateX(180deg) 속성을 주어서 미리 뒤집어 두어야 함.
그리고 .card 를 한번 더 감싸주어야 하는데, 그 이유는!!😮
👉 모든 면을 감싼 요소 자체(.card)에 호버 효과를 주면 원근감 효과 때문에
입체적으로 뒤집힐 때 해당 요소가 예상범위를 벗어나면서 호버 상태가 끊기게 된다.
딱 내가 처음에 .card 를 감싸주지 않아서 고생을 좀 했다..ㅋㅋ
그래서 .card 를 .center 로 감싸서 여기에 호버 효과를 주었다.
.center {
position: relative;
width: 320px;
height: 180px;
perspective: 800px;
&:hover .card {
transform: rotateX(180deg); //카드 돌리기
}
}길 / 바람 움직이는 모션 만들기
나는 이 부분이 제일 어려웠다!!
길이랑 바람이 너비도 랜덤이고 지나가는 속도도 랜덤이어서...
이게뭐야 😵😵 싶은 부분이 너무 많았다😵
- 내가만든 HTML code
에궁 ㅋㅋ 수많은 div... 더러버랑
그래도 전처리 언어보단 직관성 있으니 아직은 이렇게 쓰고있다...
- 내가만든 CSS code
짱 복잡시러운 이번 코드!! (어려워서 답안 참고함)
@for 문과 random() 함수를 이용하여 너비값과 애니메이션 지속시간과 지연시간을 랜덤으로 구현했다.....
.street {
...
@for $i from 1 through 10 {
& > div:nth-child(#{$i}) {
...
width: (2 + $i * 2) + px;
animation: street (0.8 + random(2) / 10) + s linear (random(10) / 10) + s infinite;
}
}
}
.wind {
...
@for $i from 1 through 10 {
& > div:nth-child(#{$i}) {
...
top: ($i * 14) + px;
width: (10 + random(150) / 10) + px;
animation: wind (0.6 + random(2) / 10) + s linear (random(10) / 10) + s infinite;
}
}
}나머지는 생략하고 제일 중요한 부분만 설명하자면,
.street(길) 너비 -> ( 2 + (1~10) * 2 ) px 로 설정해서 각 요소들에 2 ~ 22 px 를 설정해주었고
애니메이션은 random() 함수를 이용해 (0.8 + random(2) / 10) 해서 0.8, 0.9, 1 초의 지속시간과
(random(10) / 10) 해서 0.1 ~ 1 초 사이의 지연시간을 주었다....
.wind 도 마찬가지로 random() 함수를 이용했고 top 을 이용해 위치도 지정해주었다.
😵😵😵
소스를 펼쳐 보면 이해가 되지만 random값 을 직접 지정하는 것은 아직 어렵다 ㅠㅠ
animation 만들기
// ========== motion ========== //
@keyframes bycicle_motion { //자전거가 둠칫둠칫
0% {
transform: scaleY(1.04);
}
100% {
transform: scaleY(1);
}
}
@keyframes helicopter_motion { //헬기가 위아래로
0% {
transform: translateY(-12px);
}
100% {
transform: translateY(12px);
}
}애니메이션은 요렇게 만들었다!
bycicle_motion 에 특이점이 있다면
.bycicle {
img {
transform-origin: 50% 100%; // 기준점 중앙 하단으로 이동
animation: bycicle_motion 0.3s infinite alternate ease-in-out;
}
}기준점을 중앙 하단으로 옮겨야 자전거가 바닥에 고정되고 위쪽만 둠칫둠칫! 할 수가 있다.
- 내가 만든 CHALLENGE Code
우여곡절 끝에 마침내 완성!
만들기도 까다로웠고, 이해하는데도 오래 걸린 문제였다!
그래도 내 문제로 잘 만들어서 다행이다 ㅎㅎ
끝
