Question

问题与this几乎相同：如何使用CSS旋转阴影效果？

但我的问题有点复杂：我使用＆＃34; filter：drop-shadow＆＃34; 因为我想要具有阴影效果的对象是复合的 - 它由两个原语组成数字。

I achieved JS所需的效果 - 只需旋转主对象然后计算阴影方向。但重新渲染时阴影闪烁，至少在Chrome中可见。

＆＃13;

(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;
    }
})();

＆＃13;

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;
}

＆＃13;

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

＆＃13;

所以问题是：是否可以使用CSS为复合对象创建阴影效果，然后旋转它以使其与CSS保持绝对角度？

或者至少可以使用JS，但除了手动设置x和y过滤器偏移外，还有其他一些方法。

UPD ：我刚刚意识到没有必要动态应用投影风格 - 它可以应用于容器：没有重新渲染闪光，不需要应用某些技巧为了平滑阴影运动，不需要手动计算阴影偏移，这就是它。我回答了自己的问题，因为这很愚蠢。

Answer 1

暗影眨眼没有错误。我修正了your thing at my CodePen及以下。如果您创建将随光标移动的伪元素，则项目的箭头将仅使用CSS获得动态阴影。

光标移动时3D对象阴影的闪烁是浏览器特定的长期已知的CSS相关类型的错误，其中包含可用的修复程序。你只需知道那件事。您可以立即搜索StackOverflow并执行Web搜索。两种方式在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

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

所以＆＃34;的答案是可以使用CSS为复合对象创建阴影效果，然后旋转它以使其与CSS保持绝对角度？＆＃34; 是是的，有可能：只需将阴影滤镜应用于要产生阴影效果的元素的容器。

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

Answer 3

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

如果您对使用CSS的复合对象绝对需要阴影，请使用box-shadow。有一种黑客的方法来制作带阴影的三角形。 虽然使用图片效果更好，效率更高！

这里通过旋转包装元素，我们将其所有子项自动旋转并自动调整box-shadow：（矩阵值取自计算出的样式）

＆＃13;

<!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>

＆＃13;

使用CSS

3 个答案: