[css] hover_ 모양 확대 (transform:scale)

 

https://jeju43peace.or.kr/      제주 4.3평화 재단 참고

 

[특이점]

 

1. 도트점 원의 모양을 after로 만듬

  :after {content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;box-sizing:border-box;border:1px dashed #bedcdd;border-radius:50%;-webkit-border-radius:50%;}

 

2. transform:scale 사용

 

 

[transform]

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

시각적 서식 모델

transform : scale

- 요소를 확대 또는 축소를 한다

- 평면에서의 확대 또는 축소

- IE는 10부터 지원 ( 관공서 작업시 버전 확인 )

 

transform: scale(2.0)

// 가로와 세로 모두 2배 확대

 

transform : scale(2.0, 3.0)

// 가로 2배, 세로 3배 확대

 

transform : scaleX(2.0) 

transform : scaleY(3.0)

// 가로 2배로 확대

// 새로 3배로 확대

 

+ transition : all ease 1s

속성이 변화는 느낌을 주기 위해 변화의 속도 추가 해주면 좋다