Поворот эффекта падающей тени с помощью CSS

Question

Вопрос почти такой же: как вращать эффект тени с помощью CSS?

Но мой вопрос немного сложнее: я использую"filter: drop-shadow", потому что объект, для которого я хочу получить эффект тени, является составным - он состоит из двух примитивных фигур.

Я достиг желаемого эффекта с помощью JS - просто вращая основной объект, а затем вычисляя направление тени. Но тень при перерисовке мигает, это видно хотя бы в Chrome.

(function() {
    const RAD_TO_DEG = 180/Math.PI,
          DEG_TO_RAD = Math.PI/180;

    var arrow = document.getElementsByClassName('arrow')[0],
        arrow_shadow_color = 'rgba(50,50,50,0.25)',
        previous_x = 0,
        previous_y = 0,
        shadow_angle = -45,
        shadow_blur_radius = 5,
        shadow_offset = 15,
        shadow_string_right = 'px ' + shadow_blur_radius + 'px ' + arrow_shadow_color + ')',
        amount_of_attempts_to_skip = 10,
        n = 0;
  
    dropShadow(180);
    document.addEventListener('mousemove', mouseMove);

    function mouseMove(e) {
        n++;
        if (n%amount_of_attempts_to_skip === 0) {
            var angle =  Math.atan2( previous_y - e.pageY, e.pageX - previous_x ) * RAD_TO_DEG;

            arrow.style.transform = 'rotate(' + (180 - ~~angle) + 'deg)';
            dropShadow(angle);

            previous_x = e.pageX;
            previous_y = e.pageY;
        }
    }
  
    function dropShadow(angle) {
        angle = 180 - shadow_angle + angle;

        var x = ( shadow_offset * Math.cos( angle * DEG_TO_RAD) ).toFixed(2),
            y = ( shadow_offset * Math.sin( angle * DEG_TO_RAD) ).toFixed(2);

        arrow.style.filter = 'drop-shadow(' + x + 'px ' + y + shadow_string_right;
    }
})();

html, body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
* {
    margin: 0;
    border: 0;
    padding: 0;
    position: relative;
    box-sizing: inherit;
}
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-100%, -50%);
}
.arrow {
    width: 75px;
    height: 20px;
    background: #2ECC40;
    transform-origin: right;
    transition: all 0.15s ease;
}
.arrow:before {
    content: "";
    position: absolute;
    border-bottom: 15px solid transparent;
    border-right: 20px solid #2ECC40;
    border-top: 15px solid transparent;
    height: 0px;
    width: 0px;
    margin-left: -20px;
    margin-top: -5px;
}

<div class="container"><div class="arrow"></div></div>

Поэтому возникает вопрос: возможно ли создать эффект тени для составного объекта с помощью CSS, а затем повернуть его, чтобы он сохранял абсолютный угол с помощью CSS?

Или, по крайней мере, с JS, но каким-то другим способом, кроме ручной установки смещений фильтров x и y.

UPD: я только что понял, что нет необходимости динамически применять стиль отбрасывания теней - его можно применить к контейнеру: не будет повторяющихся вспышек, нет необходимости применять некоторые методы для сглаживания движения тени, нет необходимости вручную рассчитать смещение тени, вот и все. Я ответил на свой вопрос, потому что это было глупо.

Answer 1

Я только что понял, что нет необходимости динамически применять стиль отбрасывания теней - его можно применить к контейнеру: не будет повторяющихся вспышек, не нужно применять некоторые методы для сглаживания движения тени, нет необходимости вручную вычислять тень смещение, вот и все. Все они будут обработаны автоматически.

Таким образом, ответ на вопрос "возможно ли создать эффект тени для составного объекта с помощью CSS, а затем повернуть его, чтобы он сохранял абсолютный угол с помощью CSS?" Да, это возможно: просто примените фильтр отбрасывания тени к контейнеру элемента, для которого вы хотите получить эффект тени.

Stackru, извините за задаваемые глупые вопросы.

Answer 2

Мигание тени не является ошибкой. Я исправил вашу вещь в моем CodePen и ниже. Стрелка вашего проекта получит динамическую тень только с CSS, если вы создадите псевдоэлемент, который будет двигаться с курсором.

Это мерцание тени трехмерных объектов при перемещении курсора является специфической для браузера давно известной ошибкой, связанной с CSS, с исправлениями, доступными повсеместно. Вам нужно было только знать это. Вы можете искать Stackru и выполнять поиск в Интернете сейчас. Два способа имеют незначительную разницу в CSS. Но оба на самом деле работает. Я не изменил ваш JavaScript.

Вы можете читать / просматривать документы W3C, CSS-трюки this, CSS-трюки this, W3 School и этот код для создания псевдоэлемента CSS с возможностью перетаскивания.

Для вашего случая я изменил это:

.arrow {
    width: 75px;
    height: 20px;
    background: #2ECC40;
    transform-origin: right;
    transition: all 0.01s ease;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(60deg);
    -webkit-transform-style: preserve-3d; 
    transform: rotateY(60deg);

(function() {
    const RAD_TO_DEG = 180/Math.PI,
          DEG_TO_RAD = Math.PI/180;

    var arrow = document.getElementsByClassName('arrow')[0],
        arrow_shadow_color = 'rgba(50,50,50,0.25)',
        previous_x = 0,
        previous_y = 0,
        shadow_angle = -45,
        shadow_blur_radius = 5,
        shadow_offset = 15,
        shadow_string_right = 'px ' + shadow_blur_radius + 'px ' + arrow_shadow_color + ')',
        amount_of_attempts_to_skip = 10,
        n = 0;
  
    dropShadow(180);
    document.addEventListener('mousemove', mouseMove);

    function mouseMove(e) {
        n++;
        if (n%amount_of_attempts_to_skip === 0) {
            var angle =  Math.atan2( previous_y - e.pageY, e.pageX - previous_x ) * RAD_TO_DEG;

            arrow.style.transform = 'rotate(' + (180 - ~~angle) + 'deg)';
            dropShadow(angle);

            previous_x = e.pageX;
            previous_y = e.pageY;
        }
    }
  
    function dropShadow(angle) {
        angle = 180 - shadow_angle + angle;

        var x = ( shadow_offset * Math.cos( angle * DEG_TO_RAD) ).toFixed(2),
            y = ( shadow_offset * Math.sin( angle * DEG_TO_RAD) ).toFixed(2);

        arrow.style.filter = 'drop-shadow(' + x + 'px ' + y + shadow_string_right;
    }
})();

html, body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
* {
    margin: 0;
    border: 0;
    padding: 0;
    position: relative;
    box-sizing: inherit;
    transform-style: preserve-3d;
}
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-100%, -50%);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.arrow {
    width: 75px;
    height: 20px;
    background: #2ECC40;
    transform-origin: right;
    transition: all 0.01s ease;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(60deg);
    -webkit-transform-style: preserve-3d; 
    transform: rotateY(60deg);
}
.arrow:before {
    content: "";
    position: absolute;
    border-bottom: 15px solid transparent;
    border-right: 20px solid #2ECC40;
    border-top: 15px solid transparent;
    height: 0px;
    width: 0px;
    margin-left: -20px;
    margin-top: -5px;
}

<div class="container"><div class="arrow"></div></div>

Answer 3

Зависит от того, какое решение вы ищете. Если вам нужно много элементов с тенями, лучше использовать предварительно обработанное изображение. Браузер не будет тратить время на вычисление всех теней и поворотов для каждого элемента.

Если вам абсолютно необходима тень на составном объекте с помощью CSS, используйте box-shadow, Есть хакерский способ сделать треугольник с тенью. Хотя намного лучше и эффективнее использовать изображение!

Здесь, вращая элемент-обертку, мы вращаем все его дочерние элементы и автоматически box-shadow: (значение матрицы берется из вычисленного стиля)

<!doctype html>
<html>


<head>
    <style>
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        .arrow {
            top: 150px;
            left: 50px;
            position: relative;
            display: block;
            width: 280px;
            animation: rotate 5s infinite linear;
        }
        .arrow div {
            display: inline-block;
            position: absolute;
        }
        .arrow-body {
            width: 251px;
            height: 25px;
            top: 16px;
            background: green;
            box-shadow: 1px 5px 0 0 black;
        }
        .arrow-head {
            width: 0;
            height: 0;
            right: 0;
            bottom: -84px;
            box-sizing: border-box;
            border: 1em solid black;
            border-color: transparent transparent green green;
            transform-origin: 0 0;
            transform: rotate(225deg);
            box-shadow: -5px 1px 0 0 black;
        }
        #log {
            font-family: monospace;
        }
    </style>
    
    <script>
        setInterval(function(){
            var a = document.getElementById("arrow");
            var l = document.getElementById("log");
            
            l.innerHTML = ".arrow { transform: " + window.getComputedStyle(a, null).getPropertyValue("transform") + " }";
        }, 10);
    </script>
</head>


<body>
    <span id="log"></span>
    <div class="arrow" id="arrow">
        <div class="arrow-body"></div>
        <div class="arrow-head"></div>
    </div>
</body>


</html>