• Q&A
  • 회원가입
  • 로그인

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

목차
  1. transform 예제 - 요소 (회전/비틀기/크기확대) 변환
  2. transform 정의
  3. transform 구문
  4. transform 예제 - 1/2배로 축소
  5. transform 예제 - 허버 시 1.5배로 확대
  6. transform 예제 - 이미지 회전
  7. 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;}

 


[속성값]

 

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 예제 - 이미지 좌우반전

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

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012