What is the best way to link HTML transformations across several classes?

Question

What is the best way to link HTML transformations across several classes?

Is it possible to combine multiple transforms in a single element to create a unique end result?

It seems that when applying multiple transform properties to an element, only one of them will be recognized.

For example, trying to transform a div with both rotate(20deg) and skewY(20deg) like this:

.foo {
  transform: rotate(20deg);
}

.bar {
  transform: skewY(20deg);
}

<div class="foo bar"></div>

Only one transformation will take effect. While combining the transformations manually could work, it's not practical due to the countless potential combinations. Instead, how about doing something like this:

.one {transform: rotate(10deg);}
.two {transform: rotate(20deg);}
.three {transform: rotate(30deg);}
.four {transform: rotate(40deg);}

.uno {transform: skewY(10deg);}
.dos {transform: skewY(20deg);}
.tres {transform: skewY(30deg);}

I am exploring various solutions such as:

Finding a way to add to the existing transform property of a <div>
Potentially modifying classes dynamically
Utilizing jQuery to change CSS without overwriting existing properties

While I prefer CSS/JavaScript solutions, any input using jQuery is also welcome!

javascript html jquery css transform

Answer 1

Answer №1

If you want to utilize CSS custom properties (var(--X)), you can set all transformations to default values of 0 and then update them using className. Check out the following links for more information on CSS custom properties:

You can experiment with this concept without JavaScript in this example: CodePen Example

.foo {
  --rotate: 20deg;
}

.bar {
  --skewY: 20deg;
}

div[class] {
  transform: rotate( var(--rotate, 0)) skewY( var(--skewY, 0));/* fallback value is here 0 */
}


/* demo purpose */

div[class] {
  float: left;
  border: solid;
}

html {
  display: flex;
  height: 100%;
}

body {
  margin: auto;
}

<div class="foo bar">foo bar</div>
<div class="foo ">foo</div>
<div class="bar">bar</div>
<div class="nop">no transform</div>

For further details on CSS custom properties, visit: MDN Web Docs

Custom properties prefixed with '--' hold values that can be used in other declarations with the 'var()' function.

Keep in mind that custom properties are scoped to their declared elements and take part in cascading.

Learn how to handle fallbacks using custom properties:CSS Variables Fallback Example

Note: Fallback values for custom properties can include commas for multiple fallback options.

If you have issues with browser support, check out this article: IE11 Polyfill for CSS Variables Support

Answer 2

If you want to utilize CSS custom properties (var(--X)), you can set all transformations to default values of 0 and then update them using className. Check out the following links for more information on CSS custom properties:

You can experiment with this concept without JavaScript in this example: CodePen Example

.foo {
  --rotate: 20deg;
}

.bar {
  --skewY: 20deg;
}

div[class] {
  transform: rotate( var(--rotate, 0)) skewY( var(--skewY, 0));/* fallback value is here 0 */
}


/* demo purpose */

div[class] {
  float: left;
  border: solid;
}

html {
  display: flex;
  height: 100%;
}

body {
  margin: auto;
}

<div class="foo bar">foo bar</div>
<div class="foo ">foo</div>
<div class="bar">bar</div>
<div class="nop">no transform</div>

For further details on CSS custom properties, visit: MDN Web Docs

Custom properties prefixed with '--' hold values that can be used in other declarations with the 'var()' function.

Keep in mind that custom properties are scoped to their declared elements and take part in cascading.

Learn how to handle fallbacks using custom properties:CSS Variables Fallback Example

Note: Fallback values for custom properties can include commas for multiple fallback options.

If you have issues with browser support, check out this article: IE11 Polyfill for CSS Variables Support

Answer 3

Answer №2

There are numerous approaches you can take to tackle this issue. How about considering the following method? I've implemented two ` to extract the skew and rotation values and then apply the corresponding effects.

Keep in mind that it doesn't matter where the values originate from. They could be hardcoded in your buttons as data-* attributes (if you prefer them fixed). The purpose is to demonstrate how you can handle it with JavaScript (I have included some comments to simplify understanding):

var object = document.querySelector(".shape");

// This function manages the Rotational effect
function rotate(event)
{
  var rotation_val = document.getElementById("rotationVal").value;
  
  // Retrieves the CSS transform expression for rotation, stored as a data-attribute on each button to indicate its responsible transformation. However, you can store this information anywhere you prefer.
  var css_transform = event.currentTarget.getAttribute("data-rotation");
  
  // Replaces, for example, rotate(_r_) with rotate(15deg) if the value was 15
  var effect = css_transform.replace("_r_", rotation_val + "deg");
  
  // Note here that I am not replacing the transform property. Instead,
  // I am adding a new transformation to it, essentially compounding dynamically.
  object.style.transform += effect;
}

// This function handles the Skewing effect
function skewY(event)
{
  var skew_val = document.getElementById("skewVal").value;
  var css_transform = event.currentTarget.getAttribute("data-skew");
  var effect = css_transform.replace("_s_", skew_val + "deg");
  object.style.transform += effect;
}

function apply_all()
{
  var buttons = document.querySelectorAll(".effect_button");
  
  buttons.forEach(function(button){
    button.click();
  });
}

.container{
  padding: 60px;
  border: thin solid #dbdbdb;
}

.shape{
  width: 60px;
  height: 60px;
  background-color: green;
}

<div class="container">
  <div class="shape">
  </div>
</div>

<input id="rotationVal" />
<button class="effect_button" data-rotation="rotate(_r_)" onClick="rotate(event)">rotate</button>
<br />
<input id="skewVal" />
<button class="effect_button" data-skew="skewY(_s_)" onClick="skewY(event)">Skew</button>
<br />

Or Rotate and Skew at the same time:
<button onClick="apply_all(event)">Transform</button>

Answer 4

There are numerous approaches you can take to tackle this issue. How about considering the following method? I've implemented two ` to extract the skew and rotation values and then apply the corresponding effects.

Keep in mind that it doesn't matter where the values originate from. They could be hardcoded in your buttons as data-* attributes (if you prefer them fixed). The purpose is to demonstrate how you can handle it with JavaScript (I have included some comments to simplify understanding):

var object = document.querySelector(".shape");

// This function manages the Rotational effect
function rotate(event)
{
  var rotation_val = document.getElementById("rotationVal").value;
  
  // Retrieves the CSS transform expression for rotation, stored as a data-attribute on each button to indicate its responsible transformation. However, you can store this information anywhere you prefer.
  var css_transform = event.currentTarget.getAttribute("data-rotation");
  
  // Replaces, for example, rotate(_r_) with rotate(15deg) if the value was 15
  var effect = css_transform.replace("_r_", rotation_val + "deg");
  
  // Note here that I am not replacing the transform property. Instead,
  // I am adding a new transformation to it, essentially compounding dynamically.
  object.style.transform += effect;
}

// This function handles the Skewing effect
function skewY(event)
{
  var skew_val = document.getElementById("skewVal").value;
  var css_transform = event.currentTarget.getAttribute("data-skew");
  var effect = css_transform.replace("_s_", skew_val + "deg");
  object.style.transform += effect;
}

function apply_all()
{
  var buttons = document.querySelectorAll(".effect_button");
  
  buttons.forEach(function(button){
    button.click();
  });
}

.container{
  padding: 60px;
  border: thin solid #dbdbdb;
}

.shape{
  width: 60px;
  height: 60px;
  background-color: green;
}

<div class="container">
  <div class="shape">
  </div>
</div>

<input id="rotationVal" />
<button class="effect_button" data-rotation="rotate(_r_)" onClick="rotate(event)">rotate</button>
<br />
<input id="skewVal" />
<button class="effect_button" data-skew="skewY(_s_)" onClick="skewY(event)">Skew</button>
<br />

Or Rotate and Skew at the same time:
<button onClick="apply_all(event)">Transform</button>

What is the best way to link HTML transformations across several classes?

Answer №1

Answer №2

Similar questions

Trouble arises when rendering nested components in React Router 4

Alert from Google Chrome about Service Worker

Tips for accessing a unique window name in JavaScript

Is there a way to streamline this query code that seems overly complex?

In Typescript, it is not possible to assign the type 'any' to a string, but I am attempting to assign a value that is

Customize the appearance of each element in ng-repeat individually

Creating a Basic JQuery Dialog Box

Issue with incremental static generation in version 13 not functioning as expected

I encountered a sudden halt in functionality with my NextJs useState feature

Is it possible to set data using a React Hooks' setter before the component is rendered?

Unlock the innerHTML of a DIV by clicking a button with ng-click in Angular JS

Warning: HTML input values are being cleared when added

The Art of Capturing Sound: Unleashing

Image not showing up when using drawImage() from canvas rendering context 2D

Choosing solely the following immediate sibling

Creating a new component when a click event occurs in React

Changing the href of an image when the slide changes: Tips and tricks

Issue with exchanging columns in Bootstrap version 5.0

Rerender not occurring after array splice with React hooks setter

What is the best way to enable the user to scroll smoothly while new data is continually being added to the screen?