html scale属性,scale() | CSS属性参考

CSS scale()函数用于在二维空间中对一个元素进行缩放。

scale()函数的语法如下：

transform: scale( [, ]?);

scale()函数用于缩放一个元素。它接收一个或两个无单位的作为值。这两个值分别用sx和sy来表示。sx表示元素沿X轴进行缩放，sy表示元素沿Y轴进行缩放。如果只提供了一个sx值，那么sy值会被假定等于sx的值。

如果设置的值大于1，那么元素将被放大。如果值为1，元素保持不变。如果值小于1，元素会被缩小。如果设置的值为0，那么那元素被无限缩小，消失在屏幕中。值可以是负数，负数值不会缩放元素，而是会对元素进行翻转。

下面是scale()函数一些示例代码：

transform: scale(1, 1); /* 元素尺寸保持不变 */

transform: scale(2, 2); /* 元素放大2倍 */

transform: scale(1, 2); /* 水平方向不变，垂直方向上放大2倍 */

transform: scale(2, 1); /* 水平方向放大2倍，垂直方向上不变*/

transform: scale(3); /* 元素放大3倍 */

transform: scale(0.5); /* 元素缩小一半 */

transform: scale(0); /* 元素消失不可见 */

transform: scale(-1); /* 元素进行翻转 */

下图展示了取负值时的各种情况：

scale()函数取负值时的各种情况

浏览器支持

CSS3 2D Transform的浏览器兼容性列表如下：

html scale属性,scale() | CSS属性参考相关推荐

前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
html hover的属性,:hover | CSS属性参考
CSS :hover伪类用于匹配用户使用鼠标指针滑过的元素. 绝大部分的移动触摸设备都不支持鼠标的滑过(hover)交互,因此在移动设备中使用:hover伪类是没有效果的. :hover伪类是当一个元 ...
html3d空间属性,rotate3d() | CSS属性参考
CSS rotate3d()函数用于在3D空间中对元素进行旋转. rotate3d()函数的语法如下: transform: rotate3d( , , , ); 元素旋转的角度由rotate3d() ...
html 的empty属性,:empty | CSS属性参考
CSS :empty伪类选择器用于匹配页面中的空元素. :empty伪类代表没有子元素的元素.这里说的子元素,只计算元素结点及文本(包括空格),注释.运行指令不考虑在内.例如下面的div元素是一个空元 ...
html属性选择器怎么写,html – 具有“type”属性与make-up属性的CSS属性选择器和区分大小写...
我正在尝试根据其type属性设置OL样式.所有UL和OL的列表样式属性之前已经被另一个我无法修改的CSS样式表消灭了,我需要重新设置列表样式,将类型考虑在内,即如果OL应该使用Roman人物或字母数字 ...
javascript操作html元素CSS属性
以下先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .or ...
【重识 HTML + CSS】基本 CSS 属性
[重识 HTML + CSS] CSS 简介内联样式.文档样式表.外部样式表 @charset.@import 注释 HTML 和 CSS 的编写准则设置网页的图标常用 CSS 属性初识 CS ...
Jquery删除css属性
有时我们不需要某个css属性时,想删除它,但有没有removeCss方法,怎么办呢?可以使用如下方法解决 $('选择器').css('css属性',''); 即将css属性值赋值为空,页面中就不会 ...
css 窗口模式,如何：使用“CSS 属性”窗口
如何:使用"CSS 属性"窗口 11/15/2012 本文内容您可以使用**"CSS 属性"**窗口来查看并修改级联样式表 (CSS) 样式属性. 对于 We ...
CSS 3 CSS 属性 3.4 字体
CSS 文章目录 CSS 3 CSS 属性 3.4 字体 3.4.1 字体选择很重要 3.4.2 通用字体族 3.4.3 Serif 和 Sans-serif 字体之间的区别 3.4.4 一些字体的例 ...

html scale属性,scale() | CSS属性参考

html scale属性,scale() | CSS属性参考相关推荐

最新文章

热门文章