Programmers

1) 변환 예제 - 카드 뒤집기 .cards { } .card { width: 150px; height: 220px; position: relative; perspective: 600px; } .card .face { width: 150px; height: 220px; border: 1px solid lightgray; border-radius: 10px; display: flex; justify-content: center; align-items: center; transition: 2s; position: absolute; backface-visibility: hidden; } .card .face-front { background: url("https://heropy.blog/css/images/p..

1) transform 2D 변환 함수 글꼴(서체) 지정 속성 값 값(변환함수) 의미 기본값 translate(x, y) 이동(x축, y축) 단위 translateX(x) 이동(x축) 단위 translateY(y) 이동(y축) 단위 scale(x, y) 크기(x축, y축) 없음(배수) scaleX(x) 크기(x축) 없음(배수) scaleY(y) 크기(y축) 없음(배수) rotate(degree) 회전(각도) deg skew(x-deg, y-deg) 기울임(x축, y축) deg skewX(x-deg) 기울임(x축) deg skewY(y-deg) 기울임(y축) deg matrix(n,n,n,n,n,n) 2차원 변환 효과 없음 matrix보다는 명시적으로 다른 함수를 사용하는 것이 효율적이다. rotate 회..

1) transform 요소의 변환 효과(변형)를 지정 사용법 transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; .box { transform: rotate(20deg) translate(10px, 0); } translate 이동을 지정( x축으로 10만큼, y축으로 0만큼) skew scale perspective... 속성들은 다음페이지부터