Frontend

CSS) Transformations ( ++ 박스 라운드로 만들기)

도전맨 2020. 11. 1. 15:31
반응형

박스 모델을 원으로 만들기

border-radius: 50%; 

rotate

회전시키기

transform: rotateY("num"deg)

 

그밖의 transformation

rotateY,

rotateZ

scaleX

scaleY(12)

scale(2, 2) = 2배

transflateX(-60px)

skewY

 

3가지 동시에 쓰기

transformation은 박스 엘리먼트를 변형시키지 않는다.

응용

hover 일때

transition 추가

(root에 넣어야함, 여기에 root는 hover가 아니라, img)

복수로 이펙트 주기

더 많은 transform은 transform mdn 검색

 

반응형