Is it possible to include additional transformations to a div element?

Question

Is it possible to include additional transformations to a div element?

Is it possible to add additional rotation to a div that already has a transform applied? For example, can I do the following:

<div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv"></div>
<script>
document.addEventListener("click",function(){
document.getElementById("myDiv").style.transformRotateX += 10deg;
})
</script>

javascript jquery html css transform

Answer 1

Answer №1

A great option is to use velocity.js, which allows you to modify individual transform properties cumulatively. What sets velocity.js apart is its reliance on JavaScript for animations, rather than jQuery, making it more efficient and avoiding layout thrashing.

var element = document.getElementById("myDiv");

// Set initial transformation upon loading
Velocity(
  element,
  {
    rotateX: '90deg',
    rotateY: '10deg'
  },
  {
    duration: 0
  });

// Gradually adjust the rotateX property with each click
document.addEventListener("click",function(){
  Velocity(
    element,
    {
      translateZ: 0, // Trigger hardware acceleration by animating a 3D property
      rotateX: "+=10deg"
    },
    {
      duration: 0
    }
  );
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<div style="width: 200px; height: 200px; background-color: red;" id="myDiv"></div>

If you prefer using jQuery and/or Zepto for their convenient element selection methods, that's also an option:

$(function() {
  // Set initial transformation upon loading
  $('#myDiv').velocity({
    rotateX: '90deg',
    rotateY: '10deg'
  }, {
    duration: 0
  });
  
  // Progressively adjust the rotateX property with each click
  $('#myDiv').click(function() {
    $(this).velocity({
      rotateX: '+=10deg'
    }, {
      duration: 0
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<div style="width: 200px; height: 200px; background-color: red;" id="myDiv"></div>

Answer 2

A great option is to use velocity.js, which allows you to modify individual transform properties cumulatively. What sets velocity.js apart is its reliance on JavaScript for animations, rather than jQuery, making it more efficient and avoiding layout thrashing.

var element = document.getElementById("myDiv");

// Set initial transformation upon loading
Velocity(
  element,
  {
    rotateX: '90deg',
    rotateY: '10deg'
  },
  {
    duration: 0
  });

// Gradually adjust the rotateX property with each click
document.addEventListener("click",function(){
  Velocity(
    element,
    {
      translateZ: 0, // Trigger hardware acceleration by animating a 3D property
      rotateX: "+=10deg"
    },
    {
      duration: 0
    }
  );
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<div style="width: 200px; height: 200px; background-color: red;" id="myDiv"></div>

If you prefer using jQuery and/or Zepto for their convenient element selection methods, that's also an option:

$(function() {
  // Set initial transformation upon loading
  $('#myDiv').velocity({
    rotateX: '90deg',
    rotateY: '10deg'
  }, {
    duration: 0
  });
  
  // Progressively adjust the rotateX property with each click
  $('#myDiv').click(function() {
    $(this).velocity({
      rotateX: '+=10deg'
    }, {
      duration: 0
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<div style="width: 200px; height: 200px; background-color: red;" id="myDiv"></div>

Is it possible to include additional transformations to a div element?

Answer №1

Similar questions

What is the best way to utilize jquery autocomplete for searching values?

When passing parameters through a URL in TypeScript, the display shows up as "[object object]" rather than as a string

I am perplexed by the driver's inability to locate the element

Send the user back to the previous page once authentication is complete

Tips for modifying the text color of radio button choices in HTML and CSS

Issue with Javascript Date and Time Validation

Using jQuery, you can dynamically fill a field with data retrieved from two separate fields

Sending the content of a textBox to a JavaScript function

How can CSS be used to make an element completely move off the visible screen?

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

Backend data displayed on carousel presents either all images or none at all

Can someone guide me on the proper implementation of the 'useEffect' hook in React version 18?

Refresh your webpage with new content and modified URLs without the need to reload using window.history.pushState

React.js mouse and touch events do not function properly when on a mobile device's screen

Modifying text input in Angular

The process of uploading a React App to Heroku resulted in a critical error: "FATAL ERROR: Heap limit reached, Allocation failed - JavaScript heap out of memory."

Using JavaScript to transform radio buttons into checkboxes

Issues with refreshing the content in form fields

Constructing a new mongoose request without nesting by sending multiple requests

Executing a POST Request using a Custom Node Module in Express