HTML(28)——공간 변환

2024-07-12

공간: 좌표축 각도에서 정의된 3개의 좌표축 XYZ는 3차원 공간을 형성합니다. Z축 위치는 시선 방향과 동일합니다.

공간 변형

팬

속성:

변환: translate3d(x,y,z);
변환: translateX();
변환: translateY();
변환: translateZ();

값: 픽셀 단위 값/백분율

기본적으로 Z축의 변환은 볼 수 없습니다.

시거

기능: 관찰자와 z=0 평면 사이의 거리를 지정하여 요소에 원근 효과를 추가합니다.

원근 효과: 거의 크고, 아주 작으며, 거의 실제 및 먼 가상

속성:(상위 항목에 추가됨, 값 범위 800-1200)

원근감: 시거리;


  <style>
    /*空间转换*/
    .father {
      perspective: 1000px;
 
    }
 
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: blue;
      transition: all 0.5s;
    }
 
    .box:hover {
      transform: translateZ(-400px);
    }
  </style>
</head>
 
<body>
  <div class="father">
    <div class="box"></div>
  </div>
</body>