악덕고용주의 개발 일기

[ CSS3의 transform을 통한 2D, 3D 제어 ] 

-> 단, IE8아래부턴 적용되지 않는다.

1.  translae : 현재 위치한 기준점을 기준으로 요소를 x, y, z 축으로 이동한다. -> position:relative를 이용해 대채할 수 있다.

   transform : translate(x축으로 이동할 거리, y축으로 이동할 거리)

   transform : translateY(y축으로 이동할 거리)

   transform : translateX(x축으로 이동할 거리)

   transform : translateZ(z축 즉 앞뒤로 이동할 거리) // Z축은 3D이기 때문에 perspective : 원근감값 을 지정해 주어야 한다.

2. skew : x, y 축으로 요소를 비튼다

 transform : skew(x축으로 비틀정도deg, y축으로 비틀정도 deg)

 transform : skewX(x축으로 비틀정도deg)

 transform : skewY(y축으로 비틀정도 deg)

3. scale : x, y 축으로 대상을 확대한다.

 transform : scale(1.5) 

 transform : scaleX(2)

 transform : scaleY(0.5)

4. roate : x, y 축을 기준으로 대상을 회전한다.

 transform : roate(x축 회전 deg, y축 회전 deg)

 transform : roateX(x축 회전 정도 deg)

 transform : roateY(y축 회전 정도 deg)

5. transition : all 0.5s 

-> transform같은 경우는 hover되었을 때나 그런 경우 지정되는 경우가 많은데 이때, hover되기 전과 후에 css 변화에 대해 몇초에 걸쳐

    변화가 이루어 질 것인가에 대한 부분으로 이것을 지정하지 않으면 요소가 변형되는 것이 티가 나지 않아 효과를 확인하기 어렵다.

-> 이때, transition : all 0.5s(몇초에 걸쳐 변할지) 를 지정할 때는 원본에 지정해야 한다.

ex) 특정 문구가 hover시 밖에서 안으로 들어오는 예제일 경우

.testClass{position:relative;}

.testClass p{position:absolute; left:-100%; top:0%; transition:all 0.5s;} // -100%를 줘 밖으로 틔어 나가있게 했다.

.testClass p:hover{left:0%;} // hover시 텍스트가 안으로 들어오게 left:0%; 로 바까준다.

-> 이때 변경이 이러나기 전인 원본에 transition:all 0.5s 를 지정해 주어야 한다.

6. transform-origin : transform이 되는 기준점을 변경하는 속성 

transform-origin : center center // 요소의 중심을 기준점으로

transform-origin : left top // 왼쪽 위를 기준점으로 변경

transform-origin : 50% 50% // 요소 중심을 기준점으로

transform-origin : 50px 20px

7. perspective : 원근감 정도( 값이 낮을 수록 왜곡 정도가 심해진다.)

-> 3D 적인 효과를 낼 때에는 적용해야 한다.