Рекомендуемый курс:

Функция CSS perspective()

Определение и использование perspective() CSS

perspective() Функция определяет расстояние пользователя до плоскости z=0. transform в свойстве.

Пример

Использование perspective() Добавьте透视ный эффект для двух кубиков:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Попробуйте сами

Грамматика CSS

perspective(length|none)
Значение Описание
length Обязателен. Определяет расстояние пользователя до плоскости z=0. none означает, что трансформация не выполняется.

Технические детали

Версия: CSS Transforms Module Level 2

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

Связанные страницы

Урок:3D-трансформации CSS

См. также:Свойство transform в CSS

См. также:Функция CSS rotate()

См. также:Функция CSS rotate3d()

См. также:Функция CSS rotateX()

См. также:Функция rotateY() в CSS

См. также:Функция rotateZ() в CSS