HTML5 - 2D 转换之 scale

最新推荐文章于 2024-09-21 18:08:03 发布

原创最新推荐文章于 2024-09-21 18:08:03 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML5中transform属性的scale方法，用于控制元素的放大与缩小效果。scale方法可以通过设置x和y轴的比例来改变元素尺寸，并且支持等比例缩放，能够设置转换中心点，不会影响其他盒子布局。

HTML5 -`2D` 转换之 `scale`

scale 的作用
- 用来控制元素的放大与缩小
语法
```
transform: scale(x, y)
```
知识要点
- 注意，x 与 y 之间使用逗号进行分隔
- transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
- transform: scale(2, 2): 宽和高都放大了二倍
- transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
- transform:scale(0.5, 0.5): 缩小
- scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

代码

   div:hover {
	   /* 注意，数字是倍数的含义，所以不需要加单位 */
	   /* transform: scale(2, 2) */
   
	   /* 实现等比缩放，同时修改宽与高 */
	   /* transform: scale(2) */
   
	   /* 小于 1 就等于缩放*/
	   transform: scale(0.5, 0.5)
   }