Показать сообщение отдельно
  #4 (permalink)  
Старый 10.08.2016, 19:04
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Step48_rus,
Тогда, может, так? Только не на каждый чих работает - пока не докачается, не реагирует
<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
        .doors
        {
            display: inline-block;
        }
        .block
        {
            width: 100px;
            height: 150px;
            display: inline-block;
            background: #e79e6d;
            border: 2px solid #333;
            transition: transform 1s;
        }
    </style>
    <script>
        var degY = 0, degX = 0;
        var canDo = true;
        $(function () {
            $('.block').on('mousemove', function (e) {
                if (canDo) {
                    canDo = false;
                    var elem = e.target,
                       coords = elem.getBoundingClientRect();
                    degY = e.pageX - (coords.left + coords.width) / 2;
                    degX = -e.pageY + (coords.top + coords.height) / 2;
                    var timerId = setTimeout(function tick() {
                        elem.style.transform = 'perspective(300px) rotateX(' + degX  + 'deg) rotateY(' + degY  + 'deg)';
                        degX = -degX / 2;
                        degY = -degY / 2;
                        if (Math.abs(degX) > 1 || Math.abs(degY) > 1) {
                            timerId = setTimeout(tick, 700);
                        } else {
                            canDo = true;
                        }
                    }, 700);
                }
            })
        })

    </script>
</head>
<body>
    <div class="doors">
        <div class="block">
            1</div>
    </div>
</body>
</html>

Последний раз редактировалось Dilettante_Pro, 11.08.2016 в 10:12.
Ответить с цитированием