HTML(28)——Пространственное преобразование

2024-07-12

Пространство: три координатные оси XYZ, определяемые углом оси координат, образуют трехмерное пространство. Положение оси 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>

Когда мышь наведена, создается почти большой и очень маленький эффект, а ось Z перемещается на -400 пикселей.

вращать

Правило левой руки:

Атрибут: Положительное или отрицательное значение определяется в зависимости от направления вращения. Держите вращающийся вал левой рукой, Большой палец указывает в положительном направлении.Направление сгибания остальных пальцев – положительное направление вращения.

преобразование: RotateZ (значение)

преобразование: RotateX (значение)

преобразование: RotateY (значение)

Обмен технологиями