transform

기본 설정값

이동 translate: transform: translate(50px, 100px); /*좌우, 위아래*/
회전 rotate: transform: rotate(20deg); /*회전각도*/
3차원 회전 rotateX: transform: rotateX(150deg); /*앞구르기*/
3차원 회전 rotateY: transform: rotateY(130deg); /*옆구르기*/
3차원 회전 rotateZ: transform: rotateZ(90deg);
크기 scale: transform: scale(2, 3); /*왼쪽 상단을 중심으로 확대/축소*/
3차원 크기 scale3d: transform: scale3d(1.2, 1.2, 1); /*(1.2배 확대) 마지막 값을 1로 설정할 경우 가운데를 중심으로 확대/축소*/

생활을 바꾸다

html은 <div> <h3> 생활을 바꾸다 </h3> </div> csss는 div{position:relative;} h3{position:absolute;left:0;top:0;transfrom:rotate(90deg);}

/* transform으로 h3를 회전하면 h3가 회전하기 전에 존재했던 위치와 영역의 중앙에서 회전함
(을과 바 사이를 기준으로 회전을 했다는 이야기)
그래서 box의 왼쪽 상단에 글자를 배치하려면 글자의 위치를 변경해줘야 함. */

transform 응용

요소에 transform만 준다고 애니메이션 효과가 들어가는 것은 아니다.
transition을 주거나 animation으로 애니메이션 효과를 줘야함.

동그라미 위에 마우스를 올려보세요.

html은

	<a href="">
	<span class="line1"></span>
	<span class="line2"></span>
	<span class="line3"></span>
	</a>

csss는

	a{
		background: #2361be;
		width: 100px;
		height: 100px;
		border-radius: 50px;
		position: relative;
	}
	a span{
		position: absolute;
		left: 20px;
		width: 60px;
		height: 10px;
		border-radius: 5px;
		background: #fff;
	}
	a span.line1{
		top: 22px;
		transition: 0.5s;
	}
	a span.line2{
		top: 44px;
		transition: 0.2s;
	}
	a span.line3{
		top: 66px;
		transition: 0.5s;
	}
	a:hover span.line1{
		top: 50px;
		left: 10px;
		width: 80px;
		height: 5px;
		transform: rotate(225deg);
	}
	a:hover span.line2{
		top: 44px;
		opacity:0;
	}
	a:hover span.line3{
		top: 50px;
		left: 10px;
		width: 80px;
		height: 5px;
		transform: rotate(-225deg);
	}