Webkit-Transform Alternative for Firefox

webkit-transform alternative for Firefox

Yes, it's called -moz-transform. Check out this article

http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

Here is the official documentation: https://developer.mozilla.org/en/CSS/-moz-transform

Firefox: Is there any alternative to replace .css( zoom )

CSS Zoom property, supported in IE 5.5+, Opera,Safari 4, and Chrome.

Firefox is the only major browser that does not support zoom, but you could use -moz-transform since Firefox 3.5.

div.zoom {
      zoom: 2; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

---

Let us solve this question.

Try this snippet.

$('.zoom--actions .zoom-in').on('click', function() {
  if ($(".img-zoom").css("zoom")==1 | $(".img-zoom").css({"-moz-transform":"scale(1)"})){
      $(".img-zoom").css("zoom", "125%").css({"-moz-transform":"scale(1.25)"});
  }
  else if (  $(".img-zoom").css("zoom")==0.75 | $(".img-zoom").css({"-moz-transform":"scale(0.75)"})){
      $(".img-zoom").css("zoom", "100%").css({"-moz-transform":"scale(1)"});
    
  }
});

.img-zoom{
  -moz-transform: scale(1);
  zoom:1;
}
.zoom--actions{
  margin:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="zoom--actions">
  <button class="zoom-in">Zoom</button>
  <img class="img-zoom" src="https://css-tricks.com/wp-content/themes/CSS-Tricks-17/images/browser-logos/chrome_64x64.png">
</div>

Why does transform-origin not work for Firefox using inline SVG and is there an alternative?

I've solved the problem but I am (as yet) unable to give you a comprehensive reasoning why it works.

The first important thing to know is that you can chain SVG Transforms.

So, wherever you write transform="scale(2)", you can add a translate(x, y) to the chain, like this:

transform="scale(2) translate(x, y)"

So far, so good... but if scale is 2, then what values should we give to x and y of translate?

To find out, I decided to superimpose larger and subimpose smaller scaled versions of your SVG shape (one for each colour of the rainbow) and see what patterns I could find.

Over the top of your grey shape, I positioned an identically sized green shape.

I gave the green shape a transform of:

transform="scale(1) translate(0, 0)"

so that it would be exactly congruent with your original grey shape.

Then I set about subimposing larger scaled versions (yellow, orange, red) and superimposing smaller scaled versions (blue, indigo, violet).

I predicted that x and y in each case would relate to the scale factor applied to that shape and also to the overall size of the original viewBox.

With 3 smaller versions and 3 larger versions, the pattern emerged:

• Red, 8 times as large / x & y transform value is 50% of ((1000 / 8) - 1000)
• Orange, 4 times as large / x & y transform value is 50% of ((1000 / 4) - 1000)
• Yellow, 2 times as large / x & y transform value is 50% of ((1000 / 2) - 1000)
• Green, 1 times as large / x & y transform value is 50% of ((1000 / 1) - 1000)
• Blue, 0.5 times as large / x & y transform value is 50% of ((1000 / 0.5) - 1000)
• Indigo, 0.25 times as large / x & y transform value is 50% of ((1000 / 0.25) - 1000)
• Violet, 0.125 times as large / x & y transform value is 50% of ((1000 / 0.125) - 1000)

From this, we can conclude, that if you are positioning a shape centered at 50%, 50% of your viewBox and you want to display the shape in that same position with scale(2), you must also apply a translate for x of:

50% of ((width of canvas / scale-factor) - (width of canvas))

where 50% corresponds to the x position you want to centre the shape over.

And a translate for y of:

50% of ((height of canvas / scale-factor) - (height of canvas))

where 50% corresponds to the y position you want to centre the shape over.

This works consistently, but I haven't spent enough time staring at it yet, to properly understand why.

Working Example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<!-- Grey Original --><path fill="#555" d="M500 500 400 400 400 600 600 600 600 400z" />
<!-- Red Transform [50% of ((1000 / 8) - 1000) is -437.5] --><path fill="rgb(255, 0, 0)" d="M500 500 400 400 400 600 600 600 600 400z" transform="scale(8) translate(-437.5, -437.5)" />
<!-- Orange Transform [50% of ((1000 / 4) - 1000) is -375] --><path fill="rgb(255, 125, 0)" d="M500 500 400 400 400 600 600 600 600 400z" transform="scale(4) translate(-375, -375)" />
<!-- Yellow Transform [50% of ((1000 / 2) - 1000) is -250] --><path fill="rgb(255, 255, 0)" d="M500 500 400 400 400 600 600 600 600 400z" transform="scale(2) translate(-250, -250)" />
<!-- Green Transform [50% of ((1000 / 1) - 1000) is 0] --><path fill="rgb(0, 125, 0)" d="M500 500 400 400 400 600 600 600 600 400z" transform="scale(1) translate(0, 0)" />
<!-- Blue Transform [50% of ((1000 / 0.5) - 1000) is 500] --><path fill="rgb(0, 0, 125)" d="M500 500 400 400 400 600 600 600 600 400z" transform="scale(0.5) translate(500, 500)" />
<!-- Indigo Transform [50% of ((1000 / 0.25) - 1000) is 1500] --><path fill="rgb(63, 0, 255)" d="M500 500 400 400 400 600 600 600 600 400z" transform="scale(0.25) translate(1500, 1500)" />
<!-- Violet Transform [50% of ((1000 / 0.125) - 1000) is 3500] --><path fill="rgb(199, 125, 243)" d="M500 500 400 400 400 600 600 600 600 400z" transform="scale(0.125) translate(3500, 3500)" />
</svg>

Is there a way to force Firefox to define the transform origin of an SVG path to be relative to the path itself, rather than the SVG?

Why do SVG paths behave differently than every other HTML element?

Two reasons:

1. SVG elements are not HTML elements, and are not subject to the same rules.
2. The defined behaviour is consistent with the way percentage coordinates work elsewhere in SVGs.

A new property called transform-box has been proposed that will allow you to alter the behaviour of transform-origin for both HTML and SVG.

If and when browsers support this new property, you will be able to get behaviour that matches Chrome's current behaviour by using:

transform-box: fill;

FF has already implemented this, but it is not enabled by default yet (AFAIK).

For now, you will need to calculate the centre coordinates yourself. Or, alternatively, rearrange your SVG so that the path is centred on the origin and use a combination of transforms to do your rotation.

For example:

.mypath {  fill: red;  animation: spin 1s linear 0s infinite;}
@-webkit-keyframes spin {  from { -webkit-transform: rotate(0deg); }  to { -webkit-transform: rotate(360deg); }}@keyframes spin {  from {transform:rotate(0deg);}  to {transform:rotate(360deg);}}  

<svg width="400px" height="400px">  <g transform="translate(200,200)">    <!-- path centred on (0,0) -->    <path d="M -100,-100 L 100,-100 100,100 -100,100 Z" class="mypath"/>  </g></svg>

How can I zoom an HTML element in Firefox and Opera?

Try this code, this’ll work:

-moz-transform: scale(2);

You can refer to this.

How to use scale with -moz-transform?

The MDC page you linked to actually explains it pretty well.

I made you a quick example. Demo: http://jsfiddle.net/SZ87b/1/ Code:

<!doctype html>
<title>-moz-transform scale example</title>
<style>
 p { font-size: 5em; text-align: center; }
 p:hover { -moz-transform: scale(2); }
</style>
<p>Foo bar</p>

CSS3 transform and transition doesn't work properly on firefox

Using Padding

Here's my preferred method using only padding:

JSFiddle DEMO

CSS:

body {
    margin: 0;
    padding: 0;
}

.test {
    background-color:blue;
    width: 200px;
    height: 200px;
}
.test:hover {
    margin-top: 10px;
}
.transition {
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
    transition: margin 0.5s ease-out;
}

Using Transform

Or if you still want to use transform:

JSFiddle DEMO

CSS:

body {
    margin: 0;
    padding: 0;
}
.test {
    background-color:blue;
    width: 200px;
    height: 200px;
}
.test:hover {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10p));
    -o-transform: translateY(10px);
    transform: translateY(10px);
}
.transition {
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    -o-transition: -o-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}

As Kiran said already, each browser has varying support for directly using transform and transition. You can check who can use transforms here and transitions here.

Also take note that the transition wasn't applied to the :hover. It needs to be called at the base level (in this case at the div level).

---

Related Topics