使用 CSS 旋转阴影效果

Question

问题和几乎一样：如何用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

取决于您正在寻找什么样的解决方案。如果您需要很多带有阴影的元素，最好使用预渲染图像。浏览器不会花时间计算每个元素的所有阴影和旋转。

如果您绝对需要在具有 CSS 的复合对象上添加阴影，请使用 box-shadow。有一种 hacky 方法可以用阴影制作三角形。 不过使用图片会更好更高效！

在这里，通过旋转包装器元素，我们旋转了它的所有子元素，并自动旋转了它们的 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>

Answer 2

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

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

您可以 read/see W3C docs, CSS tricks's this, CSS trick's this,W3 School and 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 3

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

所以 "is it possible to create a shadow effect for a composite object with CSS and then rotate it so that it keeps the absolute angle with CSS?" 的答案是 是的，这是可能的：只需将投影过滤器应用于您要创建的元素的容器想要有阴影效果。

Whosebug，抱歉问了一些愚蠢的问题。

使用 CSS 旋转阴影效果

Rotate drop-shadow effect with CSS

javascript

css

shadow

light

dropshadow