@charset "UTF-8";
/*transform_basic.css*/
#contentBox{width: 800px; width: 50rem; height: auto;
 	min-height: 500px; min-height: 31.25rem; margin: auto;}
.box{width: 100%; height: auto; min-height: 100%; 
	margin-bottom: 5rem;
 	padding: 16px; padding: 1rem; box-sizing: border-box;
 	background-color: #fd5; border-bottom: 2px solid #333;
	border-bottom: 0.125rem solid #333;}
.box>ul{width: 100%; height: auto;}
.box>ul:after,
.box>ul::after{content:" "; display: block; width: 0; height: 0; clear: both;}
.box>ul>li{float: left; width: 300px; width: 18.75rem; 
	height: 300px; height: 18.75rem; margin: 2rem;
	background-color: #07f;	border-radius: 1rem;}

/* transform ============================================== */
/* transition
ease:자연스러움 (빨라지다 느리게)
ease-in:점점빠르게;
ease-out:점점느리게;
ease-in-out:빨라지다 느리게;
linear: 지속적인-동일한속도;
*/
/*translate: 위치 이동 ========== */
/*position relative랑 다른점?
1. z-index가 없다. 
2. position 속도저하? / transform 형태변형 
*/
.translate li {transition: all 300ms ease;}
.translate li:hover {transition: all 1000ms ease;}
.translate:hover li:nth-child(1){transform: translate(400px,-200px);
	background-color: #aca;}
.translate:hover li:nth-child(2){transform: translateX(400px);
	background-color: #aff;}
.translate:hover li:nth-child(3){transform: translateY(400px);
	background-color: #f05;}
.translate:hover li:nth-child(4){transform: translateZ(-400px);
	background-color: #705;}
.translate:hover li:nth-child(5){transform: translate3D(0,-100px,-400px);}
	/* transform3D {X,Z,Y}속도가 조금 빠르다. */
	/*z축은 원근법(perspective) 적용시 이해감..*/

/* scale: 크기조절 ========================================== */
.scale:hover li{transition: all 500ms linear;}
.scale:hover li:nth-child(1){transform: scale(1.1,1.5); background-color: #aca;}
.scale:hover li:nth-child(2){transform: scaleX(1.5); background-color: #1ca;}
.scale:hover li:nth-child(3){transform: scaleY(1.8); background-color: #1ae;}
.scale:hover li:nth-child(4){transform: scale3D(2,1,1); background-color: #eae;}

/* rotate: 회전 ========================================== */
.rotate li{transition: all 700ms linear;}
/*.rotate li{animation: all 700ms linear infinite;}*/
.rotate:hover li:nth-child(1){transform:rotate(45deg);}
.rotate:hover li:nth-child(2){transform:rotate(45deg);}
.rotate:hover li:nth-child(3){transform:rotateX(45deg);
	background-color: #cfa;}
.rotate:hover li:nth-child(4){transform:rotateY(45deg);}
.rotate:hover li:nth-child(5){transform:perspective(500px) rotateX(45deg);
	background-color: #cfa;}
.rotate:hover li:nth-child(6){transform:perspective(500px) rotateY(45deg);}
.rotate:hover li:nth-child(7){transform:rotateZ(45deg);}
.rotate:hover li:nth-child(8){transform:rotate3D(1,2,2,45deg);}
.rotate:hover li:nth-child(9){transform:rotate(360deg);}
/*180도 이상 안되는 경우가 있다 (float처리/각도가 정확하면/일부로 숫자정확X) */

/* skew: shear ==================================== */
.skew li {transition: all 0.5s linear;}
.skew:hover li:nth-child(1){transform: skew(15deg);}
.skew:hover li:nth-child(2){transform: skew(-15deg);}
.skew:hover li:nth-child(3){transform: skew(-15deg,20deg);}
.skew:hover li:nth-child(4){transform: skewX(-15deg);}
.skew:hover li:nth-child(5){transform: skewY(-15deg);}
.skew:hover li:nth-child(6){transform: skewX(-30deg);
	background-color: #aff;}
.skew:hover li:nth-child(6)>span{display:block; transform: skewX(30deg);}

/*transform-origin:형태를 변형할때 기준점을 잡아주는 것; ======================================== */
.origin{background-color: #dfd;}
.origin li{transition: all 500ms ease;}
.origin li:nth-child(1):hover{transform:rotate(45deg); transform-origin: 0 0;}
.origin li:nth-child(2){transform-origin: 0 0;}
.origin li:nth-child(2):hover{transform:rotate(45deg);}
.origin li:nth-child(3){transform-origin: 0 0;}
.origin li:nth-child(3):hover{transform:rotate(45deg) skew(45deg);}
.origin li:nth-child(4){transform-origin: 0 0;}
.origin li:nth-child(4):hover{transform:skew(45deg) rotate(45deg) ;}
.origin li:nth-child(5):hover{transform: rotate(45deg) translate(500px, 480px);}
.origin li:nth-child(6):hover{transform: translate(500px, 480px) rotate(45deg) scale(1.2);}

/* perspective ================= */
.perspective {margin-bottom: 100rem;}
.perspective>ul>li {width: 100px; height: 170px; background-color: #0ac;}
.perspective>ul{perspective: 200px;}
/*perspective : 부모에다가 줘서 (부모의 기준) 가운데 */
.perspective>ul>li:nth-child(1){transform:rotateY(60deg);}
.perspective>ul>li:nth-child(2){transform:rotateY(30deg);}
.perspective>ul>li:nth-child(3){transform:rotateY(-30deg);}
.perspective>ul>li:nth-child(4){transform:rotateY(-60deg);}

.perspective>ul>li:nth-child(5){transform: perspective(200px)
	rotate3D(1,2,2,45deg); background-color: #eae;}
.perspective>ul>li:nth-child(6){transform: perspective(10px)
	scale3D(2,1,2); background-color: #eae;}