Exploring the capabilities of translate and rotate within CSS styling

I'm attempting to create a div that rotates and moves along the Y axis at the same time. I've been successful in getting each movement to work individually, but not concurrently. Below is the code I am using to rotate the div:

function rotate_horizon_bg(deg){
  var rotate = "rotate(" + (deg) + "deg);";
  var tr = new Array(
    "transform:" + rotate, 
    "-moz-transform:" + rotate,
    "-webkit-transform:" + rotate,
    "-ms-transform:" + rotate,
    "-o-transform:" + rotate
  );

  var horizon_bg = document.getElementById("horizon_bg");
  horizon_bg.setAttribute("style", tr.join(";"));
}

While this code works perfectly for rotating the div, if I create a new function for translateY, only translateY will take effect.

Does anyone have any suggestions on how I can achieve simultaneous rotation and translation along the Y axis?

Answer №1

Simply merge the different effects together. Check out this concrete demonstration:

transform: rotate(-45deg) translate(-120px,-30px)

function combine_effects(rotateDeg, x, y){
  var element = document.getElementById("element_id");
  element.style.transform  = "rotate(" + rotateDeg + "deg) translate(" + x + "px, " + y + "px)";
}

combine_effects(-30, 3, 3);
<div id="element_id">Apply Effects Here!</div>

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

Unable to retrieve new API data when Vue.js script setup parameters change

I am working on fetching data from jsonplaceholder using Axios in Vue. I have created a limit with a select input where the user can specify how many posts they want to see. The default number of posts displayed is 10. Initially, when the page loads, eve ...

Chrome timing out when sending an express post request

I am a beginner in API development and encountering an issue with a post request timing out in Chrome. The error message I keep receiving is net::ERR_EMPTY_RESPONSE. I have included my JavaScript code below where I am attempting to send data to the API. Th ...

Examining the code - I'm having trouble locating the origin of its creation

My question might seem trivial and I could figure it out on my own, but for some reason, it's just too difficult for me. I can easily find details like the width and height of a div, the background color, and the font used. However, what I can't ...

HTML and JavaScript code to desaturate or grayscale image rollovers without the need for additional image duplicates or sprites

Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...

Navigating Angular on Internet ExplorerUnderstanding Angular's Compatibility

Having some trouble with an Angular app I'm developing. It displays perfectly on Chrome, but not at all on IE. Any tips on how to configure IE to show it correctly, or should I make changes to the app to ensure compatibility with IE? You can see how i ...

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

Encountering difficulties in compiling Dynamic HTML with the $compile function

I'm attempting to incorporate dynamic HTML into my code with the following lines: var el = $compile('<a ng-controller=\"tableController\" ng-click=\"open\">...ReadMore</a>')($scope); But I'm encounterin ...

What do you call a JavaScript function when it has a name

This code is confusing to me. It's not the usual JavaScript syntax for a function that I know of. Is this a specific function? Or perhaps it's a callback for when an update event occurs? Apologies for these beginner questions, as I am quite new t ...

Sending messages through a Discord Bot without the use of a command

I have code that is constantly running in the background in JavaScript, 24/7. I am looking to configure a discord.js bot to send a notification message if any issues or errors occur within the code. Is there a way to send a message to any channel without ...

JavaScript Function Call Crashes Script

Currently, I am delving into the world of JavaScript by exploring . I find it beneficial to tackle the exercises provided before progressing to the next chapter as a way to practice. After completing chapter 4 and reviewing the exercises found at the end ...

Error: chunk.js encountered an unexpected token < and caused a syntax error

Hello friends, I find myself in need of some assistance. I recently deployed and built an application, but whenever I try to redirect to another page, I encounter this error: Uncaught SyntaxError: Unexpected token < I suspect that the issue lies in t ...

Clicking on the user will reveal a modal containing all of the user's detailed information

**I am trying to pass the correct user data to the modal ViewUser component, but it keeps displaying the same user regardless of which user I click on. How can I specify the specific user whose data should be shown? I am sending the user information as a ...

A step-by-step guide on using props to pass an image path and load it in

How can I use the imported image path in the component props to load it into an img tag src? Any assistance is appreciated. import amy from "./amy.jpg"; <AvatarProfileIcon icon="amy" /> <img src={props.icon} /> https://co ...

Guide on converting JSON object to condensed rows when using ng-repeat

From the database, I am receiving a JSON object which is one large object: $scope.totalsum = { "A1": 1155000, "A2": null, "A3": 2133, "A31": 29292, "A32": 2321, "A33": 232342, ...

I'm curious about the specific sequence of CSS properties order recommended by Stylelint. Where can I locate

With Stylelint's CSS order option enabled, I'm having trouble getting Visual Studio Code to display the errors. Where can I locate the declaration/property order being used? Below is a snippet of my .stylelintrc.js configuration file: module.exp ...

What are the steps to effectively utilize <ul> for showcasing scrolling content?

I stumbled upon and found it to be a great inspiration for my project. I tried replicating the layout of the listed items on the site: .wrap { display: block; list-style: none; position: relative; padding: 0; margin: 0; border: ...

The uppermost part is malfunctioning

Below is the snippet of code: $('> li', this).each(function (index) { var top_space = $(this).css('padding-top'); $(this).prepend('<div></div>'); $('> div', this).css({ position ...

Is there a more efficient way to consolidate multiple functions like this into one cohesive function instead of having to define each one separately?

After attempting to implement a loop without success, I also considered using regex but that did not work either. The code in question is part of a larger project that involves dynamically adding and deleting fields using jQuery. The classes and ids used f ...

What is preventing me from adding content to a <p> element?

I'm currently developing a ToDo list web application and I'm working on retrieving the information from 4 text boxes to create the content for each ToDo item. However, when I attempt to link the elements generated from the form, I encounter the ...

Is there a way to apply the $(document).ready(function() to multiple inputs at once?

As a newcomer to JavaScript/jQuery, I am working on a form that contains 4 date selections using DatePicker. Even though the settings for all 4 date selections are the same, I attempted to use dp1 for all of them, but unfortunately, it did not work. While ...