Rotate drop-shadow effect with CSS

Question

The question is almost the same as this: how to rotate the shadow effect with CSS?

But my question is a bit more complicated: i use "filter: drop-shadow" because object that i want to have shadow effect is composite - it consists of two primitive figures.

I achieved the desired effect with JS - just rotating the main object and then calculating drop-shadow direction. But the shadow blinks on rerendering, it is visible at least in 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>

So the question is: 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?

Or maybe at least with JS but some other way but manually setting x and y filter offsets.

UPD: i just realized that there is just no need to dynamically apply drop-shadow style - it can be applied to a container: there will be no rerendering flashes, no need to apply some techniques to smoothen the shadow movement, no need to manually calculate shadow offset, that's it. I answered my own question 'cuz it was silly.

score 3 · Accepted Answer · answered Jun 24 '17 at 16:19

I just realized that there is just no need to dynamically apply drop-shadow style - it can be applied to a container: there will be no rerendering flashes, no need to apply some techniques to smoothen the shadow movement, no need to manually calculate shadow offset, that's it. All of these will be rendered automatically.

So the answer for "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?" is Yes, it is possible: just apply drop-shadow filter to the container of the element that you want to have a shadow effect.

Stackoverflow, sorry for asking silly questions.

score 1 · Answer 2 · answered Jun 24 '17 at 13:06

Shadow blinking is out of bug. I fixed your thing at my CodePen and below. Your project's arrow will get dynamic shadow with only CSS if you create pseudo element which will move with cursor.

That flickering of the shadow of 3D objects upon cursor move is browser specific long known CSS related kind of bug with fixes available everywhere. You only needed to know that matter. You can search StackOverflow and perform web search now. Two ways has minor difference in CSS. But both actually works. I have not changed your javascript.

You can read/see W3C docs, CSS tricks's this, CSS trick's this,W3 School and this code pen for CSS pseudo element drag-able drop shadow.

For your case I modified this :

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

Chrome 58 x64, no difference at all, sorry. I still see "flashes of rerendering". Btw, why do you say "shadow of 3D objects"? I'm not an expert, but as far as i know there are no CSS rules in my example that should render an element 3D. — lucifer63, Jun 24 '17 at 15:11
By now you understood it. Shadow inside div or pseudo element automatically becomes dynamic. — Abhishek Ghosh, Jun 25 '17 at 05:05

score -1 · Answer 3 · answered Jun 23 '17 at 23:38

Depends on what kind of solution you are looking for. If you need a lot of elements with shadows, it's better to use a prerendered image. Browser won't spend time calculating all the shadows and rotations for each element.

If you absolutely need a shadow on a composite object with CSS, use box-shadow. There is a hacky way to make a triangle with the shadow. It's much better and efficient to use an image though!

Here by rotating the wrapper element we rotate all of its children and automatically their box-shadow: (matrix value is taken from the computed style)

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

Your example has a shadow, it's true, but my topic is about **shadow effect that keeps the absolute angle** - when arrow moves it should not rotate relatively to the arrow. Thanks for an advice with images, but are you sure that rendering filter for a raster image requires less CPU time than for vector graphics (i mean page elements)? Are there any perf tests? — lucifer63, Jun 24 '17 at 15:22

Rotate drop-shadow effect with CSS

3 Answers3