Chemical Journey

  • 홈
  • 태그
  • 방명록

cssAnimation #css #backface 1

[css 애니메이션] 3D 애니메이션 - 동전 뒤집기 효과

See the Pen 3D animation(동전뒤집기) by Cheol-bae Lee (@cheolship) on CodePen. 요점. 1. position: absolute 는 단지 float과 같은 역할을 한다는 점. 2. 뒷면을 가려주는 backface-visibility: hidden; 속성 3. 원근감을 주는 perspective 속성 4. 'Y축을 기준'으로 회전 시켜주는 transform: rotateY(deg); 속성 + position:absolute로 좌우(또는 상하) 가운데 정렬을 할 때 left right 각각 0으로 시작점을 잡아주고 margin: auto를 줘야한다. 이때 정렬하는 요소는 width 값이 지정돼있어야한다.

TIL/CSS 2022.08.27
이전
1
다음
더보기
프로필사진

Chemical Journey

다시 👨🏻‍🔬

  • 분류 전체보기 (16)
    • TIL (14)
      • HTML (1)
      • CSS (10)
      • Javascript (1)
      • React (0)
      • Design (0)
      • Library (2)
    • info (1)
    • Git, Github (1)

Tag

무한 슬라이드, MediaQuery, NAVER 레이아웃, cssAnimation #css #backface, layout #float #clear:both, float 후처리, jsLibrary, Til, 1분코딩, 브라우저 리플로우, responsive, gsapTween, 인접 형제 선택자, css, ScrollMagic, GSAPscrollTrigger, CSS 3D, favicon #파비콘 #파비콘만들기 #티스토리파비콘 #블로그파비콘 #ico파일변환, ScrollTrigger, Tistory,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바