transform

CSS - [ 3D 애니메이션 (요소 뒤집기) ]

마우스를 올리면 요소가 뒤집히고 뒤에 있는 요소의 내용이 출력되도록 3D 애니메이션을 설정해보자. 우선 Html에 아래와 같이 앞면을 나타낼 요소와, 마우스를 올리면 나타날 뒷면을 나타낼 요소를 만들어준다. CSS에서 우선 요소를 감싸고 있는 container에 가로 세로 너비를 지정해주고(뒤에서 container에 hover 가상 선택자를 주고 container에 마우스를 올리면 3D 애니메이션 효과가 나타나도록 할건데, block 요소이므로 너비를 지정해주지 않으면 item의 범위 밖에서도 마우스를 올리면 효과가 나타나버림!), 원근감을 느낄 수 있도록 perspective 속성을 준다. 그리고 item에는 크기를 지정해주고 border-box로 box-sizing을 변경 후 요소가 뒤집혔을 때 뒷면..

CSS - [ 속성(변환 Transform) ]

이제 css의 변환 효과에 대해 살펴보자. transform : 요소의 변환 효과 지정 속성. 띄어쓰기로 구분해서 [ transform: 변환함수1 변환함수2 변환함수3 ...; ] 와 같이 여러 함수를 한번에 사용할 수 있다. transform에 사용할 수 있는 변환 함수는 크게 2D 변환 함수와 3D 변환 함수로 나뉜다. 각각 살펴보자! 2D 변환 함수 translate(x, y) : x축과 y축 이동. translateX(x) 나 translateY(y)와 같이 한 쪽 축으로만 이동시킬 수 있다. 참고로 함수의 소괄호 사이에 작성하는 x, y 값 등을 인수(=인자, Argument) 라고 한다. scale(x, y) : 크기를 배로 늘려줌. rotate(deg) : 요소를 회전시킴(각도). skew..