使用 CSS 旋转阴影效果

Question

问题和this差不多：如何用CSS旋转阴影效果？

但我的问题有点复杂：我使用 "filter: drop-shadow" 因为我想要具有阴影效果的对象是复合的 - 它由两个原始图形组成。

我achieved 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

阴影闪烁已解决。我修复了your thing at my CodePen 及以下。如果您创建将随光标移动的伪元素，您的项目的箭头将仅使用 CSS 获得动态阴影。

光标移动时 3D 对象的阴影闪烁是浏览器特定的长期已知的与 CSS 相关的错误，随处可用的修复程序。你只需要知道那件事。您现在可以搜索 StackOverflow 并执行网络搜索。两种方式在 CSS 上有细微的差别。但两者实际上都有效。我没有改变你的javascript。

您可以阅读/查看 W3C docs、CSS tricks's this、CSS trick's this、W3 School 和 this code pen 以了解 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 2

我刚刚意识到不需要动态应用阴影样式 - 它可以应用于容器：不会重新渲染闪烁，不需要应用一些技术来平滑阴影移动，不需要手动计算阴影偏移量，就是这样。所有这些都将自动呈现。

那么的答案是“是否可以用 CSS 为复合对象创建阴影效果，然后旋转它以使其与 CSS 保持绝对角度？” 是 是的，有可能：只需将阴影过滤器应用于您想要具有阴影效果的元素的容器。

Stackoverflow，很抱歉提出愚蠢的问题。

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>