【CSS3】变形--缩放 scale()
来源:互联网 发布:量子计算机人工智能股 编辑:程序博客网 时间:2024/05/19 13:42
缩放 scale()函数 让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况:
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
例如:
div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5);}
注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放(X轴缩放)
3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)
HTML代码:
<div class="wrapper"> <div>我将放大1.5倍</div></div>
CSS代码:
.wrapper { width: 200px; height: 200px; border:2px dashed red; margin: 100px auto;}.wrapper div { width: 200px; height: 200px; line-height: 200px; background: orange; text-align: center; color: #fff;}.wrapper div:hover { opacity: .5; -webkit-transform: scale(1.5); -moz-transform:scale(1.5) transform: scale(1.5);}
演示结果
注意: scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。
0 0
- 【CSS3】变形--缩放 scale()
- 7:---(3)CSS3中的变形--缩放 scale()
- 变形--缩放 scale()
- css3 2D--transform--scale缩放
- 设置or获取 css3旋转 变形 缩放 操作
- css3变形
- css3变形
- css3-变形
- CSS3变形
- 【css3】变形
- CSS3变形
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- 【小技巧】css3 scale 或者zoom实现文本根据容器自动缩放
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- TI DSP TMS320C66x学习笔记之内联指令(c6x.h中文注释)(六)
- 【15】时间、日期和日历
- 利用gettimeofday简单测试程序用时
- SQL开发整理
- 安卓项目中的R.java文件丢失如何解决
- 【CSS3】变形--缩放 scale()
- openwrt install ipk 的步骤
- android ndk编写
- SQLITE在ANDROID上的一个BUG
- 欢迎使用CSDN-markdown编辑器
- 关于递归简单理解
- 创建Material样式卡片风格注意事项
- 重复数据删除:固定和可变长度数据块
- vtk读取CT重建后分割报错