NETFLIX (애니메이션 효과) 사이트, 명함 카드 만들기

NETFLIX 사이트

애니메이션 효과

- transition : 애니메이션 속도를 조절

- transform : 요소를 회전하거나 확대 / 축소하거나 비트는 등 형태를 변형

  scale : 확대 / 축소

  rotate : 회전

  translate : 이동

  skew : 비틀기

.row_poster {
  width: 100%;
  object-fit: contain;
  max-height: 100px;
  margin-right: 10px;
  transition: transform 450ms;
}

.row_poster:hover {
  transform: scale(1.2);
}​

row html

 <div class="row">
        <h2>NETFLIX ORIGINALS</h2>
        <div class="row_posters">
          <img
            src="./main-img/large-movie1.jpg"
            alt="movie"
            class="row_poster row_posterLarge"
          />
          <img
            src="./main-img/large-movie2.jpg"
            alt="movie"
            class="row_poster row_posterLarge"
          />
          <img
            src="./main-img/large-movie3.jpg"
            alt="movie"
            class="row_poster row_posterLarge"
          />
          <img
            src="./main-img/large-movie4.jpg"
            alt="movie"
            class="row_poster row_posterLarge"
          />
          <img
            src="./main-img/large-movie5.jpg"
            alt="movie"
            class="row_poster row_posterLarge"
          />
          <img
            src="./main-img/large-movie6.jpg"
            alt="movie"
            class="row_poster row_posterLarge"
          />
          <img
            src="./main-img/large-movie7.jpg"
            alt="movie"
            class="row_poster row_posterLarge"
          />
      
        </div>
      </div>

실행 결과

GitHub

GitHub - jeongdong99/NETFLIX

 

명함 카드 만들기

앞, 뒤 경우에 따라 안보이게 하기

- backface-visibility : hidden : 요소의 뒷쪽에서 앞면이 보이게 할지 정함

.business-card .front ,
.business-card .back {
    height: 100%;
    width: 100%;
    border: 3px solid black;
    backface-visibility: hidden;
    border-radius: 24px;
    overflow: hidden;
}​

애니메이션 효과

- perspective() : 원근감 지정

- rotateX : 가로를 축으로 회전

- rotateY : 세로를 축으로 회전

- rotateZ : Z축 기준으로 회전

.business-card:hover .front {
    transform: perspective(700px) rotateX(180deg);
}

.business-card .back {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #19eedc;;
    transform: perspective(700px) rotateX(-180deg);
}

.business-card:hover .back{
    transform: perspective(700px) rotateX(0deg);
}

실행 결과

GitHub

GitHub - jeongdong99/Business-card

참고 사이트

https://www.youtube.com/watch?v=lBI6dbw8XXg&t=549s