Modify the X/tx position in the CSS translate3d() function

Is there a way to adjust the CSS tx position without altering other values in translate3d(tx, ty, tz)? The transform property is typically manipulated through JavaScript, but I'm only interested in modifying the tx parameter.

For instance, if the current CSS Code is 

transform: translate3d(93px, -185px, 0)
or 
transform: translate3d(58px, -130px, 0)
, is it possible to change it to 
transform: translate3d(0, -185px, 0)
or 
transform: translate3d(0, -130px, 0)
while leaving the rest of the properties untouched?

csscss-transforms

Answer №1

To ensure proper operation, it is crucial to maintain the values of ty and tz using the following method:

   const retrieveTransformation = element => {
      var transformation = window.getComputedStyle(element, null).getPropertyValue('-webkit-transform');
      var results = transformation.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/);
    
  if (!results) return [0, 0, 0];
  if (results[1] == '3d') return results.slice(2, 5);

  results.push(0);
  return results.slice(5, 8);
}

document.querySelector(".button").addEventListener("click", () => { // trigger event
const targetElement = document.querySelector(".myElement"); //element in which to adjust transform tx
  const [x, y, z] = retrieveTransformation(targetElement);
  targetElement.style.transform = `translate3d(0, ${y}, ${z})`; // modify only tx to 0
});

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 can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Harnessing the power of flexbox for data visualization

Trying to use flexbox to display data from a dataset in my code. Here is the code snippet: <div ng-app="myapp" ng-controller="FirstCtrl"> <div ng-repeat="name in names" class="graph-wrapper"> <div class="aside-1 content"> ...

javascripthtmlcssangularjsflexbox

How can I activate div elements by clicking on a specific div using Angular 2?

I have created a custom component with search dropdown functionality for selecting dates. <div class="search-dropdown calender-dropdown "> <div class="search-dropdown-tabs-wrp"> <ul class="search-dropdown-tabs"> <li& ...

cssangulartypescript

The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels? Let's say we have a variable storing the outerHeight of .pg-sect: var $section = $('.pg-sect').outerHeight(); Now, if I want to add an additional 70px to the he ...

javascriptjqueryhtmlcss

How can I apply justify-content exclusively to the first row with Bootstrap 4?

I need a solution where the rows generated dynamically within a div are centered only if it is the first row. If there is only one row and the elements in that row do not fill up to the specified Bootstrap class properties col-xl-3 col-lg-4 col-md-6 col-sm ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Guide for creating a scroll-triggered rotation animation using only JavaScript

Looking to achieve a cool scroll effect with an image that rotates on the X-axis by a specific degree, such as 70deg. The goal is to have the image's rotateX value change to 0deg when it enters the viewport upon scrolling and revert back to 70deg whe ...

javascripthtmlcss

Column count pseudo class is malfunctioning on Safari browser

Why is the pseudo class with column count not working in the Safari browser? I have captured two screenshots to illustrate this issue. 1. Firefox browser screenshot https://i.sstatic.net/27uoI.png 2. Safari browser screenshot https://i.sstatic.net/vRN ...

htmlcssbrowsersafaricolumn-count

Injecting a full browser-screen DIV into the body of the webpage

Recently, I was tasked with developing a script that could be utilized on any website. As a test, I decided to use the Google search results page. My goal is simple - to have a full-screen semi-transparent div displayed on any site for cookie notification ...

javascripthtmlcss

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...

cssangularangular-materialangular-forms

Utilizing Bootstrap for creating responsive CSS regulations

Is there a way for specific parts of my website to automatically resize on a mobile device without having to manually input responsive CSS rules based on page width? Can Bootstrap be used to trigger these changes instead? For instance, I noticed that Boot ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

What sets apart the usage of :host from its absence?

I'm finding it quite confusing to understand the usage of :host in Angular. For instance, let's consider a CSS file named a-component.component.css and its corresponding HTML file named a-component.component.html with a selector of app-a-compone ...

javascripthtmlcssangularfrontend

employing rowspan functionality within a JavaScript application

How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference. ...

javascripthtmlcss

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

Issues with Vue enter transitions not functioning as expected

I am currently involved in a project where I need to implement enter and exit animations for some components. When a component enters the screen, it should come from the bottom, and when it leaves, it should go upwards. The intended functionality is that w ...

javascriptcssanimationvue.jsvuejs2

Shuffle various div elements in a random pattern using jQuery

Check out this jQuery fiddle I'm using for my project: http://jsfiddle.net/BREvn/5/ Currently, I am creating a bird shooting game where the number of birds increases with each level. These birds are essentially represented by div elements, but I am ...

jqueryhtmlcss

Using Jquery variables for calculations and they do not work with numerical values

Hey there, I'm new to this so bear with me. I have a jQuery question that's puzzling me... I'm attempting to set the line height using the following method: var line_height = $('.container').css("height"); console.log(line_height ...

jquerycssvariablesmathheight

When transformed into clickable links, the list items start piling up on

Here are two groups of code along with a straightforward question that most people can answer easily, but still worth asking. Below is the initial piece of code with working CSS implementation: <div class="subTopHolder"> <ul class="language ...

htmlcss

What is the best way to transform an HTML table into the Bootstrap grid system without losing any spacing?

To ensure compliance with the Americans with Disabilities Act, I needed to use an unordered list in my cart instead of a table. Unfortunately, this change has caused some issues with the CSS styles that were previously applied. Currently, I am attempting ...

htmlcssbootstrap-4vertical-alignment

Tips for positioning an image in the TOP Right corner below the navbar using CSS

I am currently in the process of learning HTML and CSS, and I would like to practice and conduct research whenever I encounter difficulties. Recently, I have been attempting to style my landing page based on a screenshot that I took. However, I have been u ...

htmlcss