Toggle CSS Transform Button For All Elements with the * Selector

Question

Been trying to solve this all day, but just can't work it out. It's probably something really simple, but nothing seems to work.

I am using Divi scroll animations. However, on some devices they are a bit too much, so I made a button that switched them off, by disabling transform globally. However, I also want to be able to turn it back on again. I tried toggle , but it didn't work.

Because I'm not targeting a style, I can't use class toggles etc. It probably needs to be a style toggle, but on the * . So I was wonder if there is a way of doing this; or even better, how can this can be done without Jquery?

This is the site I'm trying to get it to work on.

Any solutions, are really appreciated.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#turnOffNow").click(function(){ $("*").css("transform", "none"); }); }); </script>

 <div id="turnOffNow" style="color:#fff;"> Turn Off Animations </div>

Answer 1

I think this will solve your problem.

Add a class to your CSS:

.notransform * {
    transform: none;
}

Append this class to your html tag in your page:

$("#turnOffNow").click(function(){
    $("html").toggleClass("notransform");
});

You can also try transform: none !important to force that.

Answer 2

for be able to turn it on, assuming you has some inline transforms which was gone, better you give them css class , which will give them transform:none !important then remove it for turn on.

example css:

body.no-transform * {transform: none !important}

js (jQuery)

function removeTransform(){$('body').addClass("no-transform")}
function backTransform(){$('body').removeClass("no-transform")}

js (Vanilla)

function removeTransform(){document.body.classList.add("no-transform")}
function backTransform(){document.body.classList.remove("no-transform")}