A method for locating the shadow's exact position

Can anyone assist me in determining the algorithm to calculate the position of a shadow based on the object's rotation?

For instance, suppose I have a PNG image with 

-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) Xpx Ypx 0px);
and -webkit-transform: rotate(Zdeg);

I am looking to create a jQuery script that can determine the values of X and Y (shadow position) based on the rotation angle Z in degrees.

Through experimentation, I have compiled the following table:

 X | -5| -5| 0 | 5 | 5 | 5 | 0 | -5| -5| – Shadow position

 Y | 0 | 5 | 5 | 5 | 0 | -5| -5| -5| 0 | – Shadow position

 Z | 0 | 45| 90|135|180|225|270|315|360| – Rotation
jqueryalgorithmcss

Answer №1

Given the equations:
A = -5 * cos(B);
B = 5 * sin(C);

Answer №2

Let's transform the values for X and Y based on the formula:
X = cos(Z) ? -5 * (cos(Z) / abs(cos(Z))) : 0;
Y = sin(Z) ? -5 * (sin(Z) / abs(sin(Z))) : 0;

Alternatively,
X = -5 * cos(Z);
Y = -5 * sin(Z);

It's important to convert the degrees to radians in this calculation.

http://jsfiddle.net/mBQxK/4

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

javascriptjqueryhtml

Creating a Map in C using just the libraries <stdio.h> and <malloc.h>

I have the task of implementing a Map in C using only <stdio.h> and <malloc.h> from the standard library. I have already created a linear version with an array (complexity = O(N^2)) and a BST version on map key (complexity = O(Nlog(N))). I am n ...

calgorithmdictionarytime-complexity

Increase the spacing within div columns containing rows of uniform height

Is there a way to add some extra space between the H3-1 div and the H3-2 div? Ideally, I would like to achieve this without using custom CSS, but if necessary, that's okay too. I'd prefer to stick with the col-sm-6 class instead of using col-sm ...

htmlcssbootstrap-4

Mystery factor triggering the appearance of scrollbar as the window is resized to a specific width threshold

I'm facing a rather peculiar problem. I'm currently in the process of creating a webpage tailored for an iPhone screen resolution of: width: 640; height: 960; However, there seems to be a mysterious hidden element that is extending the width of ...

iphonehtmlcss

invalid audio element

I'm currently working on building an audio player with a visualizer feature. However, when I try to initiate the audio player by clicking on the input button, my debug console keeps showing this error message: Uncaught (in promise) DOMException: Fa ...

javascriptjqueryhtmlaudio

Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...

cssresponsive-designsrcsetresponsive-images

Prevent lengthy headers from disrupting the flow of the list items

I've encountered an issue while working on a website that features a list of items. When the title, such as "roller blinds," spans across two lines, it disrupts the layout below. How can I prevent this from happening without compromising on having lon ...

htmlcsshtml-lists

exploration page complete with a plethora of interactive jquery elements and enhancements

In today's web applications, many are incorporating jQuery widgets into their search pages to allow users to easily filter search results without leaving the page. As a result, I've observed that web apps are now utilizing <ul> code for tab ...

jqueryajaxruby-on-rails-3jquery-ui

Discovering the maximum font size that can be displayed on a single line in CSS

I am working with a wrapper div tag that has the capability of adjusting its dimensions. <div class="wrapper"> <p class="inside-text">Some text</p> </div> How can I use CSS to set the font-size of inside-text to be as large as ...

htmlcss

A guide on transforming HTML into a variable using JavaScript

Having trouble converting HTML to a JavaScript variable. This is my HTML code: <div onclick="openfullanswer('2','Discription part','This is the code part');"> I want to create this HTML code dynamically, but I&apo ...

javascriptjqueryhtml

Creating a personalized scrollbar for the body using Bootstrap 3

I've been searching for the best solution to customize the scroll-bar in Bootstrap, but I haven't found anything that works perfectly yet. I want to replace the default browser scroll-bar on the body and other elements like panels, wells, and tex ...

javascriptjquerytwitter-bootstrapscroll

Selecting items in an HTML table using a drag-and-drop feature for selecting square or rectangular sections with colspan and rowspan

I am currently working on an implementation for selecting cells in a table. The challenge I am facing is that the cells in question can have a colspan or rowspan, which means that the selection is not restricted to a square or rectangular shape. For exampl ...

javascriptjquerycssangularjshtml-table

Error in JavaScript: Uncaught TypeError - Unable to access the "left" property of an undefined object

This error is really frustrating and I've come across several inquiries regarding this console issue. It's not providing enough information in the chrome console for me to effectively troubleshoot. /** * Adjustment of dropdown menu positio ...

javascriptjquerycssconsole.log

What is the best way to retrieve distinct id values from a form in Rails when sending a DELETE request via AJAX?

I am determined to grasp the intricacies of AJAX and how it operates, hence, I prefer not to use "remote: true" for this task. The issue at hand is that despite attempting to send a DELETE request to the server using a form input, each submission results i ...

javascriptjqueryruby-on-railsrubyajax

To close the responsive menu, simply click anywhere outside of the navigation bar

My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code: <!-- Navigation --> <nav id= ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations. Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0? Let&apo ...

csscss-specificity

Tips for arranging two columns and two rows on mobile using Bootstrap 5

I'm currently using bootstrap 5, and I need to display 2 columns and 2 rows on my mobile device, but it's only showing 1 row. I have two PSDs for this layout in desktop mode: https://i.sstatic.net/HWG6e.png And for mobile mode: https://i.ssta ...

htmlcssbootstrap-5

Guide to making two text boxes with SimpleDialog in jQuery Mobile

I came across the link below, but unfortunately it's not working for me. jQuery Mobile SimpleDialog with two Inputs? Is there anyone who can assist me after reviewing the code snippet provided below? <script type="text/javascript> ...

javascriptjqueryjquery-mobile

Using Rails to pass variables through a remote link to a partial

I am aiming to create a minimalist image gallery where the user is presented with thumbnail images that, when clicked, will refresh a container on the page with the full-size version. Currently, I have only been able to make it work with one image, as I ca ...

jqueryruby-on-rails

Can you explain the functionality of icon maps (or charts)?

As I was exploring the source code of various websites, I noticed a common pattern - all the icons were stored in one image map. Upon further investigation, I discovered that each icon is referenced individually when needed. I came across a helpful article ...

htmlcssicons