HTML/CSS/JS로 만드는 스타벅스 웹페이지

CSS 속성

Transition

요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

transition: 속성명 지속시간 타이밍함수 대기시간;

속성

• transition-property
  전환 효과를 사용할 속성 이름을 지정
  기본 값은 all. 원하는 속성만 지정할 수 있다. 콤마(,) 또는 줄바꿈으로 여러 속성에 다른 값을 지정해줄 수도 있다.
  transition: width 1s, background-color .5s;

• transition-timing-function
  전환 효과의 타이밍 함수를 지정

  • ease
    기본 값. 느-빠-느
  • linear
    일정하게
  • ease-in
    느-빠
  • ease-out
    빠-느
  • ease-in-out
    ease-in과 ease-out 합친 것

• transition-delay
  전환 효과가 몇 초 뒤에 시작할지 대기시간을 설정
  기본 값은 0.

Transform

요소의 변환 효과

transform: 변환함수1 변환함수2 ... ;

2D 변환 함수

• translate(x, y)/(x)/(y)
  이동

• scale(x, y)/(x)/(y)
  크기

• rotate(degree)
  회전(각도)

• skewX(x)/skewY(y)
  기울임

3D 변환 함수

• translate3d(x, y, z)
  이동

• perspective(n)
  원근법(거리)
  항상 맨 앞에 작성해야한다.

• rotateX(x), rotateY(y), rotateZ(z)
  회전

속성

• perspective 속성
  하위 요소를 관찰하는 원근 거리를 지정

  속성의 적용 대상 - 관찰 대상의 부모
  함수의 적용 대상 - 관찰 대상에 직접 지정

• backface-visibility
  3D 변환으로 회전된 요소의 뒷면 숨김(hidden) 여부

Overwatch 실습

margin: 0 auto;
1. 요소가 블록요소
2. 가로사이즈 명시돼있어야함

Bang-Overwatch

Netlify로 배포해보았다!