Как использовать перспективу css, чтобы соответствовать div для визуального размещения на экране ноутбука svg? - PullRequest
Новая
       30

Как использовать перспективу css, чтобы соответствовать div для визуального размещения на экране ноутбука svg?

0 голосов
/ 27 января 2020

Я уверен, что вопрос уже сбивает с толку. По сути, я хочу использовать css, чтобы абсолютно позиционировать div с перспективой, чтобы он выглядел как внутри экрана ноутбука, который я создал с помощью svg.

Я полагаю, что это возможно при использовании некоторой комбинации perspective , rotateX(), rotateY(), но не могу понять, что это правильно.

См. Этот кодовый блок

Вот соответствующий css: 

.container {
    perspective: 500px;
}
.screenContents {
    transform: rotateX(10deg) rotateY(-10deg);
    /* 16:9 ratio to calculate size */
    --scale: 36;
    width: calc(16px * var(--scale));
    height: calc(9px * var(--scale));
    position: absolute;
    top: 30px;
    left: 300px;
}

Html: 

<div class='container'>
    <div class='screenContents'>Screen Contents</div>
</div>
<img src='device.svg' />

Некоторые другие попытки, которые я пытался установить perspective-origin и / или использование rotateZ()

SVG Размеры и информация

В случае, если это окажется полезным, вот некоторые размеры экрана, которые я вычислил из svg: 

area: 1529 sq pixels

(ширина и высота рассчитаны для каждой угловой точки) 

width: ~500px
height: ~350px

Координаты каждой точки экрана svg, которые я использовал для определения высоты, ширины и площади: 

top left: 382,514
top right: 882,503
bottom left: 312,187
bottom right: 816,151

Кроме того, svg - это просто прослеженная картинка Google Pixel Go ноутбук с размером экрана 13,3 "и соотношением сторон 16: 9

Мне кажется, эти размеры должны быть как-то в окончательных расчетах.

Сводка

Я бы хотел расположить div так, чтобы он выглядел так, как будто он просматривается на экране ноутбука. Я не знаю, как правильно сделать это, и мог бы использовать некоторые указатели или безумного гения, чтобы создать решение для меня. Используйте codepen , чтобы возиться с ним.

Итак, любой css гуру, который мог бы помочь ????

1 Ответ

1 голос
/ 27 января 2020

Изменить ниже CSS

.container {
/*   perspective: 500px; */
}

.screenContents {
 transform: perspective(3651px) rotateY(-30deg) rotateX(18deg) rotate(3deg);
 --scale: 37;
 width: calc(16px * var(--scale));
 height: calc(10px * var(--scale));
}
...