2D转换之缩放scale（CSS3）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2D转换之缩放scale</title><style>div {width: 200px;height: 200px;background-color: skyblue;margin: 100px auto;/*    transform-origin: left bottom; *//*  也可以设置缩放的中心点 */}div:hover {/* 1.里面写的数字不跟单位  其数字就是倍数的意思 1就是1倍  2就是2倍 *//*  transform: scale(2, 2); *//* 2.修改了宽度为原来的2倍 ，高度不变 *//* transform: scale(2,1); *//* 3.等比例缩放 同时修改宽度和高度  *//*   transform: scale(2); *//*   4.我们可以进行缩小  小于1 就是缩放 */transform: scale(0.5, 0.5);/*     5.使用scale的优势是，在缩放的同时，不会影响其他盒子 *//*  也可以设置缩放的中心点 */}</style>
</head><body><div></div>
</body></html>

2D转换之缩放scale（CSS3）相关推荐

2D转换综合写法（CSS3）
2D转换综合写法(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
2D转换中心点transform-origin（CSS3）
2D转换中心点transform-origin(CSS3) <!DOCTYPE html> <html lang="en"><head>< ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...
2D转换之旋转与缩放
2D转换之旋转 rotate 2D转换指的是让元素在2维平面内顺时针旋转或者逆时针旋转. 1. 语法: transform:rotate(度数) 2. 重点: 1. rotate里面跟度数,单位是de ...
CSS3之转换(2D转换,动画，3D转换)
@TOC 1. 2D转换 1.1 2D转换之移动translate 1.1.1 translate基本使用 <!DOCTYPE html> <html lang="en&q ...
2D转换 + 动画 + 3D转换
1. 2D 转换转换(transform)是CSS3中最具有颠覆性的特性之一,可以实现元素的位移.旋转.缩放等效果移动:translate 旋转:rotate 缩放:scale 1.1 二维坐标系 ...
23CSS3中的2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果. 转换(transform)可以简单理解为变形. 移动:translate: 旋转:rotate: 缩 ...

2D转换之缩放scale（CSS3）

2D转换之缩放scale（CSS3）

2D转换之缩放scale（CSS3）相关推荐

最新文章

热门文章