CSS 如何使用 -moz-transform 缩放?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3288946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:25:08  来源:igfitidea点击:

How to use scale with -moz-transform?

firefoxcsstransform

提问by Mithun Sreedharan

Any body has a Good example showing how to use scale with -moz-transform?

任何机构都有一个很好的例子来展示如何使用-moz-transform缩放?

回答by Mathias Bynens

The MDC page you linked toactually explains it pretty well.

您链接到的 MDC 页面实际上很好地解释了它。

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

我给你做了一个简单的例子。演示:http: //jsfiddle.net/SZ87b/1/代码:

<!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>

回答by Chatoxz

here is an example of the css for the mayor browsers The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

这是市长浏览器的 css 示例 值 scale(2,4) 将宽度转换为原始大小的两倍,将高度转换为原始大小的 4 倍。

div{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
} 

回答by Davorama

When using a scale (or rotate) transform you may need to set the origin.

使用缩放(或旋转)变换时,您可能需要设置原点。

  transform-origin: top left;

to get the effect you are looking for.

以获得您正在寻找的效果。