CSS로 Element 변화주기 transform

---

 

transform (변환)

    - CSS3 추가(이전에는 JavaScript 구현하던 기능들..)
    - transform: 속성값;
    - 객체(태그)의 위치, 배율(크기), 회전, 왜곡 변형 적용

https://www.opentutorials.org/course/2418/13684

변형(transform) - 생활코딩

 

transform의 속성값

• translate() - 위치 변형
• scale() - 배율(크기) 변형, 배율(확대,축소) 조정, 반전 효과 등..
• rotate() - 회전 변형
• skew() - 왜곡 변형(비틀기)
• matrix() - 위의 1~4번 포함 + 사용자 정의 변형, 행렬

1. translate()

.box:hover {
	transform : translate(0px, 15px);
}

2. scale()

#box2 {
	transform : scale(2);
}

3. rotate()

#box2 {
	//rotate(deg) : deg(회전할 각도)
	transform : rotate(45deg);
}

4. skew()

#box2 {
	transform : skew(45deg, 0deg);
}

5. metrix()

#box {
	//matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());
	transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
}