[transform] CSS - transform 속성 ★ - 요소 (회전/비틀기/크기확대) 변환 + 마우스 허버 시 줌효과 (= transform속성 = 트랜스폼속성) ※ 이미지회전/텍스트회전/로고회전

1. transform 예제 - 요소 (회전/비틀기/크기확대) 변환
2. transform 정의
3. transform 구문
4. transform 예제 - 1/2배로 축소
5. transform 예제 - 허버 시 1.5배로 확대
6. transform 예제 - 이미지 회전
7. transform 예제 - 이미지 좌우반전
8. transform 예제 - 텍스트 회전 (= 로고 회전)
9. transform 예제 - position 속성 이용한 요소 중앙 정렬
10. transform 예제 - 버튼 허버 시 뜬 효과 + 버큰 클릭 시 눌림 효과

transform 예제 - 요소 (회전/비틀기/크기확대) 변환 

 

<style> 

div.a {

  width: 150px;

  height: 80px;

  background-color: yellow;

  -ms-transform: rotate(15deg); /* IE 9 */

  -webkit-transform: rotate(15deg); /* Safari 3-8 */

  transform: rotate(15deg);

}

div.b {

  width: 150px;

  height: 80px;

  background-color: yellow;

  -ms-transform: skewY(15deg); /* IE 9 */

  -webkit-transform: skewY(15deg); /* Safari 3-8 */

  transform: skewY(15deg);

}

div.c {

  width: 150px;

  height: 80px;

  background-color: yellow;

  -ms-transform: scaleY(1.5); /* IE 9 */

  -webkit-transform: scaleY(1.5); /* Safari 3-8 */

  transform: scaleY(1.5);

}

</style>

<h2>transform: rotate(15deg)</h2>

<div class="a">Homzzang.com</div>

<br>

<h2>transform: skewY(15deg)</h2>

<div class="b">Homzzang.com</div>

<br>

<h2>transform: scaleY(1.5)</h2>

<div class="c">Homzzang.com</div>

 

결과보기

transform 정의

 

요소 (2차원 평면 + 3차원 입체) 변환.

 

---

 

1.

요소의 (회전, 반전, 크기 조절, 이동, 기울이기, 비틀기) 등 가능.

 

2.

• 기본값: none
• 상속여부: X
• 애니효과: O
• CSS버전: CSS3
• JS구문: object.style.transform="rotate(7deg)";

 

3.

• IE9 이상 최신 브라우저 지원.
• 2차원 평면 변환: IE10 이상 주요 최신브라우저 지원. (IE9 경우 -ms- 접두어 필요.)
• 3차원 입체 변환: IE12 이상 주요 최신브라우저 지원

 

4. MDN transform 예제 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

 

transform 구문

 

selector {transform: none|transform-functions|initial|inherit;}

 

---

[속성값]

 
※ 한번에 여러 속성값 사용하려면, 한칸 띄고 나열.
(예) transform: translate(-50%, -50%) rotate(90deg) scale(1.5);

 

none

변환 없음.

 

matrix (n, n, n, n, n, n)

6개 값의 행렬을 사용하여 2D 변환 정의.

 

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

16개의 값으로 구성된 4x4 행렬 사용해 3D 변환 정의.

 

translate (x, y) ★

2D 상, 위치 이동. (예) translate(50px, -50px)

 

translate3d (x, y, z)

3D 상, 위치 이동.

 

translateX (x) ★

X축만 위치 이동. (예) translateX(50px)

 

translateY (y) ★

Y축만 위치 이동. (예) translateY(-50px)

 

translateZ (z)

Z축만 위치 이동.

 

scale (x, y) ★

X,Y축 크기 배율 변환. (예) scale(1.5, 1.5)

 

scale3d (x, y, z)

X,Y,Z축 크기 배율 변환.

 

scaleX (x) ★

X축 크기 배율 변환. (예) scaleX(1.5)

 

scaleY (y) ★

Y축 크기 배율 변환. (예) scaleY(1.5)

 

scaleZ (z)

Z축 크기 배율 변환.

 

rotate (angle)

2D 회전 정의. 각도는 매개변수에 지정.

 

rotate3d (x, y, z, angle)

3D 회전.

 

rotateX (angle)

X 축 따라 3D 회전.

 

rotateY (angle)

Y 축 따라 3D 회전.

 

rotateZ (angle)

Z 축을 따라 3D 회전.

 

skew (x-angle, y-angle)

X축 및 Y축 따라 2D 비틀기 변환.

 

skewX (angle)

X축을 따라 2D 비틀기 변환.

 

skewY (angle)

Y축 따라 2D 비틀기 변환.

 

perspective (n)

3D 변형 요소의 투시도 정의.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.

 

transform 예제 - 1/2배로 축소

 

.pie {

  transform: scale(0.5);

  height: 200px;

  width: 200px;

  position: relative;

  margin: 0 30px 30px 0;

}

 

결과보기

transform 예제 - 허버 시 1.5배로 확대

 

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* { box-sizing: border-box;}

.zoom {

  padding: 50px;

  background-color: pink;

  transition: transform .2s;

  width: 200px;

  height: 200px;

  margin: 0 auto;

}

.zoom:hover {

  -ms-transform: scale(1.5); /* IE 9 */

  -webkit-transform: scale(1.5); /* Safari 3-8 */

  transform: scale(1.5); 

}

</style>

  

<div class="zoom">홈짱닷컴 Homzzang.com</div>

결과보기

transform 예제 - 이미지 회전

 

<style> 

img {

       width:40%;

}

img.b {

    -ms-transform: rotate(270deg); /* IE 9 */

    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */

    transform: rotate(270deg);

}

</style>

 <img src="https://i.imgur.com/LbolCW8.png" class='a'>

 <img src="https://i.imgur.com/LbolCW8.png" class='b'>

 

결과보기 

transform 예제 - 텍스트 회전 (= 로고 회전)

 

<style>

.logo {

  font-family: 'Arial', sans-serif;

  font-size: 40px;

  font-weight: bold;

  color: #ff6600;

  text-transform: uppercase;

  position: relative;

}

.logo span {

  display: inline-block;

  transition: transform 1.5s ease;

}

.a, .b, .c, .d {

  transform: rotateY(360deg);

}

.logo:hover span {

  transform: rotateY(0deg);

  cursor:pointer;

}

</style>

 

<div class="logo">

  <span class="a">홈</span>

  <span class="b">짱</span>

  <span class="c">닷</span>

  <span class="d">컴</span>

</div>

결과보기

transform 예제 - 이미지 좌우반전

https://homzzang.com/b/css-324

transform 예제 - position 속성 이용한 요소 중앙 정렬

 

<style>

div { 

  padding:50px;

  width:300px;

  color:white;

  background:red;

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%, -50%);

  box-sizing:border-box;

}

span {

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%, 400%);

  box-sizing:border-box;  

}

</style>

 

<div>홈짱닷컴 Homzzang.com</div>

<span>홈페이지 제작 관리</span>

 

결과보기

transform 예제 - 버튼 허버 시 뜬 효과 + 버큰 클릭 시 눌림 효과

 

button:hover {transform: translateY(-4px);}

button:active {transform: translateY(0);}

예제보기