한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
transform 속성
scale(), rotate(), translate(), skew()
scale()
scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다.
transform: scale(2, 0.5);숫자만 사용할수도 있고 %도 가능합니다.
rotate()
rotate는 요소를 지정한 각도만큼 회전시킵니다.
회전 각도가 플러스 값일 경우 시계 방향, 마이너스 값일 경우 반시계 방향으로 회전합니다.
transform: rotate(180deg);deg를 사용합니다.
translate()
translate 는 기본적으로 X 축과 Y 축을 따라 지정된 거리만큼 요소를 이동시킬 때 사용합니다.
transform:translate(-70px, -40px)
px도 가능하고 %도 가능합니다.
skew()
skew는 요소를 지정한 만큼 X 또는 Y축으로 기울입니다.
transform:skew(x축 60deg, y축 90deg);deg를 사용합니다.
transition
- transition-property : 효과를 적용하고자 하는 css 프로퍼티를 지정. 즉, 과정을 보고 싶은 속성을 지정
- 기본값 : all
- 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다.
- transition-property: width height;
- 전환 수치를 다르게 하려면?
- transition: width 1s, height 2s
- transition-duration : 효과가 나타나는데 걸리는 시간
- 기본값 : 0s
- transition-timing-function : 트랜지션 효과의 속도
- 기본값 : ease, 느리게 시작하여 점점 빨라졌다 느려지면서 종료
- linear : 시작부터 종료까지 일정하게
- ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 서서히
- ease-out : 빠르게 시작해서 점점 느려짐
- ease-in-out : 느리게 시작하여 빨라지다가 느려지면서 종료
- 어떤 효과를 선택하든 duration 시간에 영향을 끼치지 않는다.
- transition-delay : 특정 조건 하에서 효과 발동
- 기본값 : 0s
- 초 단위(s) 또는 밀리 초 단위(ms)로 지정