Наложение линии на 3d объект

240

16 февраля 2019, 06:50

У меня есть поверхность (div), которая трансформирована в 3d (CSS), то есть задан rotate. Div может быть повернут на любой угол любой оси. Пользователь наводиться на этот блок и зажимает ЛКМ, после чего мышка выходит за область трансформации. В итоге получается линия. Первая точка - нажатие, вторая - пользователь отжал ЛКМ. Как можно перенести эту линию в систему координат блока? Это требуется для того, чтобы понять в каком направлении была проведена линия. Возможно, немного сумбурно, так что могу уточнить, если потребуется. Буду благодарен даже за направление, в котором нужно копать.

Upd: Ещё раз повторюсь. Проблема в том, что если отслеживать нажатие мыши только на на 3d поверхности, то при выходе за её пределы события не произойдет. Следовательно, я должен отлавливать события документа или родительского блока, но они уже не в 3d + у поверхности трансформация, так что не понятно откуда и куда была проведена линия.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <style> 
    #content { 
      width: 100%; 
      height: 100%; 
      background: #eee; 
    } 
     
    #viewport { 
      width: 500px; 
      height: 500px; 
      -webkit-perspective: 2000px; 
      -moz-perspective: 2000px; 
      -ms-perspective: 2000px; 
      perspective: 2000px; 
      -webkit-perspective-origin: center -200px; 
      -moz-perspective-origin: center -200px; 
      -ms-perspective-origin: center -200px; 
      perspective-origin: center -200px; 
      background: #eee; 
      border: 1px solid #aaa; 
      margin: 200px auto; 
    } 
     
    #viewport .surface { 
      width: 400px; 
      height: 400px; 
      -webkit-transform-style: preserve-3d; 
      -moz-transform-style: preserve-3d; 
      -o-transform-style: preserve-3d; 
      -ms-transform-style: preserve-3d; 
      transform-style: preserve-3d; 
      border: 5px solid #f00; 
      margin: 20px auto; 
      transform: rotateX(43deg) rotateY(25deg); 
      background: #575; 
    } 
  </style> 
</head> 
 
<body> 
  <div id="content"> 
    <div id="viewport"> 
      <div class="surface"></div> 
    </div> 
  </div> 
  <script> 
    // events... 
  </script> 
</body> 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как обновить данные на странице ajax + vue + vuex?

Как правильно сделать добавление отзывов? При сабмите формы хочу добавить отзыв, отобразить на странице и очистить поля в формеКак это можно...

229

MySQL

Добавить в таблицу колонку array

Какой должен быть запрос к БД, чтобы можно было создать колонку для хранения тэговПодумал что можно сделать так:

195

MySQL

MYSQL Как выполнить триггер в процедуре и через PREPARE?

Подскажите, пожалуйстаДелаю так

174

MySQL

Как правильно использовать MySql?

Я юзаю денвер и захожу в phpmyadmin http://localhost/Tools/phpMyAdmin/но как я понимаю эти базы данных, которые я создаю они остаются на этом компьютере и с другого...

205