Получение позиции мышки относительно блока к которому применено CSS-свойство transform с rotateX и rotateZ

Question

Подскажите, пожалуйста, как получить позицию мышки относительно блока к которому применено CSS-свойство transform с rotateX и rotateZ?

На первом скриншоте показано, что после применения CSS-свойства transform с rotateX(55deg) и rotateZ(45deg) оси x и y не изменяются:

Как сделать так, чтобы координаты мышки правильно отсчитывались от верхнего левого угла блока с учетом свойства transform:

Пример кода здесь:

$(document).ready(function () {

$(this).on('mousemove', function (e) {

    let offset = $('.platform').offset();
    let top    = e.pageY - parseInt(offset.top,  10);
    let left   = e.pageX - parseInt(offset.left, 10);
    let w = $('.platform').width();
    let h = $('.platform').height();
    let hypot = Math.sqrt(w * w + h * h).toFixed(2);

    $('.cursor_coords').html(
        'top:  ' + top + '<br>' +
        'left: ' + left + '<br><br>' +
        '=== CHECK === ' + '<br><br>' +
        'top: ' + (top >= 0) + '<br>' +
        'left: ' + (left >= 0) + '<br><br>' +
        'bottom: ' + '-' + '<br>' +
        'right: ' + '-' + '<br><br>' +
        '=== CHECK === ' + '<br><br>' +
        'width: ' + w.toFixed(2) + '<br>' +
        'height: ' + h.toFixed(2) + '<br><br>' +
        'hypot: ' + hypot + '<br>'
    );

});

});

html, body {
    background-color: #607D8B;
    height: 100%;
    margin: 0;
    padding: 0;
}

* { box-sizing: border-box; }

.grid {
    background-color: transparent;
    background-image: linear-gradient(180deg, #FFFFFF 1px, transparent 0px),
                      linear-gradient(90deg,  #FFFFFF 1px, transparent 0px);
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: 2vw 2vw, 2vw 2vw;
    width: 300%;
    height: 300%;
    position: absolute;
    top: -50%;
    left: -50%;
    opacity: 0.6;
    transform: rotateX(55deg) rotateZ(45deg);
}

.platform {
    background-color: rgba(0, 0, 0, 0.6);
    border-left: 3px solid red;
    border-top: 3px solid green;
    width: 53.8vw;
    height: 49.8vw;
    position: absolute;
    bottom: -0.9vw;
    left: 16.9vw;
    z-index: 69;
    transform: rotateX(55deg) rotateZ(45deg);
}

.cursor_coords {
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 12px;
    font-family: 'Consolas', monospace;
    padding: 15px 20px;
    position: fixed;
    right: 4vw;
    bottom: 10vw;
    border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grid"></div>
<div class="platform"></div>

<div class="cursor_coords"></div>

БЛОГ НА HUSL

Получение позиции мышки относительно блока к которому применено CSS-свойство transform с rotateX и rotateZ

Ответы (0 шт):