변형 관련 스타일

참고

• 이미지는 기본적으로 자신만의 사이즈를 가지고 있어
  width / height 중 하나의 값만 지정해도 나머지는
  방향은 비율에 따라 자동으로 맞쳐 진다

2차원 변형

• 이미지를 2차원 평면에서 움직이는 명령들
• transform : translate ~

마우스를 올렸을 때(hover) x축으로 100px 만큼 이동한다

.trans-x-2d:hover{
    -ms-transform: translate(100px,100px);
    -webkit-transform: translate(100px,100px);
    transform: translateX(100px); 
}

마우스를 올렸을 때(hover) Y축으로 100px 만큼 이동한다

.trans-y-2d:hover{
    -ms-transform: translate(100px,100px);
    -webkit-transform: translate(100px,100px);
    transform: translateY(100px);
}

마우스를 올렸을 때(hover) 대각선으로 100px 만큼 이동한다

.trans-d-2d:hover{
 	-ms-transform: translate(100px,100px);
	-webkit-transform: translate(100px,100px);
    transform: translate(100px,100px);
                        /*x축  y축*/
}

CSS속성 작성 시 크로스 브라우저(브라우저가 달라지는 경우) 처리 방법

• ms- : microsoft (엣지)
• webkit- : 크롬 , 사파리.
• o : 오페라
• mox : 파이어폭스

-ms-transform: translate(100px,100px); 
-webkit-transform: translate(100px,100px);

비율 - Scale

• transform : scaleX(값) 가로 방향 비율 확대
• transform : scaleY(값) 세로 방향 비율 확대
• transform : scale(값 , 값) 요소 자체를 확대 축소 한다
  
  
  요소를 비율을 조정할 때 margin을 잘 설정 해야한다.

x y z 이동

.trans-3d:hover{
    transform:perspective(300px) translate3d(50px,50px,100px);
    										가로 / 세로 / y축
}

회전 : rotate

요소를 회전한다

/* x축 회전  */
.trans-rotate-x-3d{
    transform:perspective(300px)  rotateX(45deg);
}
/* y축 회전  */
.trans-rotate-y-3d{
    transform:perspective(300px)  rotateY(45deg);
}
/* z축 회전  */
.trans-rotate-z-3d{
    transform:perspective(300px)  rotateZ(45deg);
}
/* x,y,z축 회전  */
.trans-rotate-3d{
    transform:perspective(300px)  rotate3d(0.5,0.5,0.5, 45deg);
    /* roatae3d ( x ,y ,z 회전각도);
        x/ y / z 는 0~ 1 사이 숫자 */
}

변경시에 지연 시간 : ( transition )

duration : 지연 시간

.test2{
    transition-duration: 5s; // 5초만큼 지연된다 (ms 단위도 가능)
    border-radius:5% ;  //모서리 둥글게 하는거 50% == 원
}   

변형 딜레이

linear | ease | ease-in | ease-out | ease-in-out | cublic-bezier(n,n,n,n)

transition-timing-function: cubic-bezier(0.3, 0.3, 1, 0.5);


변형의 속도를 조절한다. 벡터값이나 이것저것 어려운게 많아 이미 만들어진걸 주로 사용한다.