Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 스타일 변환 속성


HTML DOM 스타일 변환 속성은 HTML 문서의 요소에 2D 또는 3D 변환을 반환하고 적용합니다.

구문

다음은 구문입니다 -

  • 변환 반환

object.style.transform
  • 변형 수정

object.style.transform = “value”

여기서 값은 -

일 수 있습니다.

설명
상속
상위 요소에서 이 속성 값을 상속합니다.
초기
이 속성 값을 기본값으로 설정합니다.
없음
변형을 설정하지 않습니다.
변환 기능
유효한 2D 또는 3D 변환 함수일 수 있습니다.
세로
요소의 높이를 크기 조정 가능으로 설정합니다.

기능

유효한 2D 또는 3D 변환 함수는 다음과 같습니다. -

함수
설명
행렬(n,n,n,n,n,n)
6 값의 행렬을 사용하여 2D 변환을 지정합니다.
matrix3d(n,n,n,n 등 ...)
16개 값의 행렬을 사용하여 3D 변환을 지정합니다.
번역(x,y)
2D 변환을 지정합니다.
translate3d(x,y,z)
3D 번역을 지정합니다.
번역X(x)
X축 값만 사용하여 평행이동을 지정합니다.
번역Y(y)
Y축 값만 사용하여 평행이동을 지정합니다.
번역Z(z)
Z축 값만 사용하여 평행이동을 지정합니다.
스케일(x,y)
2D 스케일을 지정합니다.
scale3d(x,y,z)
3D 스케일을 지정합니다.
스케일X(x)
X축 값만 사용하여 스케일을 지정합니다.
스케일Y(y)
Y축 값만 사용하여 스케일을 지정합니다.
스케일Z(z)
Z축 값만 사용하여 스케일을 지정합니다.
회전(각도)
2D 회전을 지정합니다.
rotate3d(x,y,z)
3D 회전을 지정합니다.
rotateX(x)
X 값만 사용하여 회전을 지정합니다.
Y(y) 회전
Y축 값만 사용하여 회전을 지정합니다.
Z(z) 회전
Z축 값만 사용하여 회전을 지정합니다.
스큐(x,y)
2D 스큐를 지정합니다.
skewX(x)
X축 값만 사용하여 스큐를 지정합니다.
왜곡Y(y)
Y축 값만 사용하여 Skew를 지정합니다.
관점(n)
3D 변환을 위한 투시도를 지정합니다.

예시

HTML DOM 스타일 변환 속성의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
      text-align: center;
   }
   .box {
      background: lightcoral;
      width: 200px;
      height: 200px;
      margin: 2rem auto;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
</head>
<body>
<h1>DOM Style transform Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Set transform</button>
<script>
   function add() {
      document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 스타일 변환 속성

"변환 설정을 클릭합니다. ” 버튼을 눌러 빨간색 상자에 2D 변환을 적용합니다.

HTML DOM 스타일 변환 속성