/*트랜스폼(Transform)
요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기위한 함수를 제공한다.
단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다.*/
/*transform function 설명 단위*/
/*translate(x,y) 요소의 위치를 X 축으로 x만큼, Y 축으로 y만큼 이동시킨다. px, %, em 등*/
/*translateX(n) 요소의 위치를 X 축으로 x만큼 이동시킨다. px, %, em 등*/
/*translateY(n) 요소의 위치를 Y 축으로 y만큼 이동시킨다. px, %, em 등*/
/*scale(x,y) 요소의 크기를 X 축으로 x배, Y 축으로 y배 확대 또는 축소 시킨다.0과 양수*/
/*scaleX(n) 요소의 크기를 X 축으로 x배 확대 또는 축소 시킨다. 0과 양수*/
/*scaleY(n) 요소의 크기를 Y 축으로 y배 확대 또는 축소 시킨다. 0과 양수*/
/*skew(x-angle,y-angle) 요소를 X 축으로 x 각도만큼, Y 축으로 y 각도만큼 기울인다. +/- 각도(deg)*/
/*skewX(x-angle) 요소를 X 축으로 x 각도만큼 기울인다. +/- 각도(deg)*/
/*skewY(y-angle) 요소를 Y 축으로 y 각도만큼 기울인다. +/- 각도(deg)*/
/*rotate(angle) 요소를 angle 만큼 회전시킨다. +/- 각도(deg)*/
/*transform*/
/*변환함수를 프로퍼티값으로 쉼표없이 나열한다. 나열순서에 따라 차례대로 효과가 적용된다.*/
/*transform: func1 func2 func3 ...;*/
.box {
width: 95px;
height: 95px;
line-height: 95px;
color: white;
text-align: center;
border-radius: 6px;
}
.original {
margin: 30px;
border: 1px dashed #cecfd5;
background: #eaeaed;
float: left;
}
.child {
background: #2db34a;
cursor: pointer;
}
.translate {
/*단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다.*/
transform: translate(10px, 50px);
}
.scale {
transform: scale(.75);
}
.skew {
transform: skew(5deg, -20deg);
}
.rotate {
transform: rotate(70deg);
}
.complex {
transform: scale(.5) rotate(20deg);
}
.translate:hover {
transition: transform 1s linear;
transform: translate(0px, 0px);
}
.scale:hover {
transition: transform 1s linear;
transform: scale(1);
}
.skew:hover {
transition: transform 1s linear;
transform: skew(0, 0);
}
.rotate:hover {
transition: transform 1s linear;
transform: rotate(0);
}
.complex:hover {
transition: transform 1s linear;
transform: scale(1) rotate(0);
}
/*transform-origin*/
/*요소의 기본기준점을 설정할 때 사용된다. 기본기준점은 요소의 정중앙이다(50%,50%).
이동은 기준점을 변경하여도 일정 거리만큼 이동하므로 의미가 없다.
설정값으로 %, px, top left, bottom right 을 사용할 수 있다.
0, 0은 top left, 100% 100%는 bottom right 과 같은 값이다.*/
.scale1:hover {
transition: transform 1s linear;
transform-origin: 0 0;
/*왼쪽 위로 50% 줄어듬*/
transform: scale(.5);
}
.scale2:hover {
transition: transform 1s linear;
transform-origin: 50% 50%;
/*정중앙을 기준으로 50% 줄어듬*/
transform: scale(.5);
}
.scale3:hover {
transition: transform 1s linear;
transform-origin: 100% 100%;
transform: scale(.5);
}
.translate:hover {
transition: transform 1s linear;
/*transform-origin: 100% 100%;*/
transform: translate(10px, 10px);
}
/*3D transform*/
/*transform function 설명 단위*/
/*translate3d(x,y,z) 요소의 위치를 X 축으로 x만큼, Y 축으로 y만큼 Z 축으로 z만큼 이동시킨다. px, %, em 등*/
/*translateX(n) 요소의 위치를 X 축으로 x만큼 이동시킨다. px, %, em 등*/
/*translateY(n) 요소의 위치를 Y 축으로 y만큼 이동시킨다. px, %, em 등*/
/*translateZ(n) 요소의 위치를 Z 축으로 z만큼 이동시킨다. px, %, em 등*/
/*scale3d(x,y) 요소의 크기를 X 축으로 x배, Y 축으로 y배, Z 축으로 z배 확대 또는 축소 시킨다. 0과 양수*/
/*scaleX(n) 요소의 크기를 X 축으로 x배 확대 또는 축소 시킨다. 0과 양수*/
/*scaleY(n) 요소의 크기를 Y 축으로 y배 확대 또는 축소 시킨다. 0과 양수*/
/*scaleZ(n) 요소의 크기를 Z 축으로 z배 확대 또는 축소 시킨다. 0과 양수*/
/*rotate3d(x,y,z) 요소를 X 축으로 x각도, Y 축으로 y각도, Z 축으로 z각도 회전시킨다. +/- 각도(deg)*/
/*rotateX(x) 요소를 X 축으로 x각도 회전시킨다. +/- 각도(deg)*/
/*rotateY(y) 요소를 Y 축으로 y각도 회전시킨다. +/- 각도(deg)*/
/*rotateZ(z) 요소를 Z 축으로 z각도 회전시킨다. +/- 각도(deg)*/