When using jQuery CSS3, the second instance of ''rotate()'' within the ''transform: rotate() translate() rotate()'' will override the first one

I've been working on a code snippet that positions div elements around a circle:

angle = 0; mangle = 0;        
for(i = 1; i<= count; i++)
{
    $("#p" +i).css("transform", "rotate(" + angle + "deg) translate(250px) rotate("+mangle+"deg)");
    angle = 360 / count;
    mangle = (-1) * angle;
}

However, I'm facing an issue where the second rotation replaces the first one in the end! For instance, I expect it to be:

rotate(30deg) translate(250px) rotate(-30deg)

But it actually turns out as:

rotate(-30deg) translate(250px)

I even gave a shot, but it didn't fix the problem. Can anyone help me identify what's causing this?

jqueryhtmlcsstransform

Answer №1

One potential solution is to nest the second "rotate" within a separate "transform" function. This approach just popped into my head.

Answer №2

Even though I couldn't find a direct solution to this problem, I came up with a clever workaround! I have div elements named '#p1', '#p2', ... where I added another nested div inside each one and applied the second 'rotate()' function to it, which surprisingly did the trick :)

Initially, it looked like:

<div id='p1'> content </div>
<div id='p2'> content </div>
<div id='p3'> content </div>

With some tweaking in jQuery:

angle = 0; mangle = 0;        
for(i = 1; i<= count; i++)
{
    $("#p" +i).css("transform", "rotate(" + angle + "deg) translate(250px) rotate("+mangle+"deg)");
    angle = 360 / count;
    mangle = (-1) * angle;
}

Now, it appears as:

<div id='p1'><div> content </div></div>
<div id='p2'><div> content </div></div>
<div id='p3'><div> content </div></div>

Updated jQuery code:

angle = 0; mangle = 0;        
for(i = 1; i<= count; i++)
{
    $("#p" +i).css("transform", "rotate(" + angle + "deg) translate(250px)");
    $("#p" +i).children('div').css("transform", "rotate(" + mangle + "deg)");
    angle = 360 / count;
    mangle = (-1) * angle;
}

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

Adding a <span> element within an <h1> tag in WordPress

I am attempting to create this layout in Wordpress using the code <h1>This is my <span>title</span></h1>, but I am unsure how to incorporate a <span> tag within the <?php the_title(); ?> function. After consulting the c ...

phphtmlcsswordpress

Click the button on your mobile device to open the already installed Android app

After creating a small Android app using jQuery Mobile, I incorporated a button to open another native Android app. Is it feasible for the jQuery Mobile app button to load/open an already installed and functioning native Android app upon click? I would gr ...

javascriptandroidjqueryjquery-mobilenative

Equal Sized <li> elements within Bootstrap Cards

I've been working with the following "template", and there are multiple cards like this on the settings page I'm currently developing. <!-- Card template --> <div class="card mt-3 shadow-sm"> <div class="card-hea ...

htmlcsstwitter-bootstrapbootstrap-5

Having trouble iterating through the elements with Beautifulsoup as I constantly encounter the error message stating 'NavigableString' object does not have the attribute 'a'

I've been encountering the following error message 'NavigableString' object has no attribute 'a' When attempting it this way def get_vlad(url): html = requests.get(url, headers=headers) soup = Be ...

pythonhtmlparsingweb-scrapingbeautifulsoup

Using Jquery to assign a value to a checkbox

When I have 3 checkboxes arranged in a column, clicking on any checkbox should automatically set the value of all checkboxes in that entire column (not row). If a checkbox in the 2nd column is checked or unchecked, I want to ensure that all other checkbox ...

jquery

Unable to remove the dropotron transparency from the menu dropdown

I'm currently working with a CSS template that includes a Dropotron for JQuery menu animation. I've run into a problem trying to remove the transparency effect on the dropdown menu. Oddly enough, the second dropdown labeled "About Us" appears sol ...

javascriptjqueryhtmlcss

Storing client-side data permanently in ASP.Net is a crucial aspect of web development

I am currently working on a project involving a Point of Sale (POS) system using ASP.Net. The web application functions perfectly when the client has access to the internet. However, I am exploring ways to enable the client to use the application offline w ...

c#asp.nethtmlcookiesweb-sql

Having trouble with the width:auto attribute in IE7?

CSS #wrapper .tn{ width:auto; height:20px; line-height:20px; float:left; padding:5px 2px 5px 5px; margin:0 5px 10px; font-weight:bold; background:#f0f0f0; } HTML <div id="wrapper"> ...

htmlcssinternet-explorerwidthinternet-explorer-7

Generate a customized form based on selected radio button option

Hey there! I'm curious to know if it's achievable to utilize Javascript/jQuery or Ajax in displaying a form depending on a radio button selection. Here's the scenario: I have two unique forms. If one radio button is chosen, I'd like to ...

javascriptjqueryhtmlajaxforms

Tips for implementing version control for css, js, and jsp files

I've created a single-page web application with multiple views, utilizing ng-if for rendering. These views lack headers or body sections and consist only of HTML code. Each view is managed by a separate controller, with many click functionalities han ...

javahtmlangularjsspring-mvcjsp

Transform HTML elements within an *ngFor iteration based on a specific variable in Angular 4

In my current project using Angular 4, I am faced with the task of dynamically modifying HTML tags within an *ngFor loop based on a variable. Here is the code snippet that represents my approach: <mat-card-content *ngFor="let question of questionGrou ...

htmlangulartypescript

Adjusting margin in CSS for SVGIcon to align with adjacent text elements - a step-by-step guide

Is there a way to set margin-left or margin-right for an Icon component inside a toggle button component (svg+text inside button) in ReactJS using CSS? https://i.sstatic.net/xQLrK.png https://i.sstatic.net/og4yE.png I am looking to create space between t ...

htmlcssreactjsuser-interface

What is the best way to display just the border of a background image while hiding the content?

The demonstration at this codepen https://codepen.io/Chester/pen/QPoyjN showcases a border animation effect. While it works effectively with a white background, I am interested in making the box's background dynamic. <div class="rainbow"& ...

htmlcsssasscss-selectors

Guide on how to fill a jQuery DataTable with data from an XMLHttpRequest response

I have come across multiple inquiries on this topic, but none of the solutions provided have brought me close enough to resolving my issue. Hopefully, someone out there will find it simple to address. I am attempting to populate a DataTable using an XHR re ...

javascriptjqueryajaxdatatables

Need help addressing a sliding page issue in my Upwork clone script using JavaScript

For those familiar with Upwork's UI, you may have noticed a small feature I implemented. When a user clicks on a freelance job offer, another page opens from the left side using transform: translate(120%) to transform: translate(0). The issue arises ...

javascripthtmlcss

Refreshing the accurate data in the database

In the form below, there are several fields: <form action="?code='.$order_id.'" method="post"> <input type="text" name="length" placeholder="'.$row_order['length'].'"> <input type="text" name="breadth" ...

phphtmlmysqlforms

Openshift is unable to locate the CSS file I uploaded

I successfully created a new app on Openshift and the default template is functioning well. The only customization I made was: <head> ... <link href="styles.css" rel="stylesheet"> </head> and placed a file named styles.css in the same d ...

htmlcssopenshift

Using Jquery to update text content in a JSON object

I am attempting to replace the '0' with 'changetothis', but it seems like my code is not working as expected. Is there a different approach I should take to achieve this? Link to Example var yql_url = 'https://query.yahooapis.co ...

javascriptjqueryajax

Creating visually appealing tables with nested tables using CSS for styling including borders and backgrounds

Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS: . ...

htmlcss

What is the best way to activate a button based on the presence of a cookie?

As I develop my web application, I am faced with the challenge of catering to both guests and registered users. I want to provide a 'Log out' button exclusively for registered users after they have logged in. One solution I am considering is to d ...

javahtmljspservletscookies