transform / Loading / aside animation

 " Transform " 

❑ 양수로 움직이면 오른쪽 & 음수로 움직이면 왼쪽

⇨ ex) transform:translateX(100px);

⇨ ex) transform:translateY(-100px);

 

❑ 가상 움직임

 

❑ margin과의 차이점

⇨ margin: 공간 추가, 제거, 실체 움직임

⇨ margin은 공간을 제거하거나 추가하기 때문에 다 따라 움직임

 

❑ Z축은 반드시 원근감이 있어야 함

⇨ perspective가 설정 되어 있어야 함

 

❑ center에 놓는 방법

⇨ transform:translate(-50%,-50%)}

 

# scale

 

➡

 

# rotate

❑ 회전

⇨  img 자체에서 perspective를 걸 수 있음

 

❑ 원근감을 같이 쓸 때는 앞에다가 셋팅 해야함

⇨ perspective 요소를 직접 쓸 때는 앞에다가 써야함

        .rotate img{
            transform-origin: 0 50%;
        }

        .rotate:hover img{
            /* transform:perspective(500px) rotateY(45deg) ; */
            transform: perspective(500px) rotateY(45deg);          
        }

❑ 오른쪽으로 돌면 양수, 왼쪽으로 돌면 음수

❑ 기준점 변경: transform-origin

 

 

 

# skew

❑ 비틀기

 

 " Loading... " 

❑