使用transform-origin来进行控制在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。用法：transform-origin: 10px 10px;共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；...
缩放
，指的是“缩小”和“放大”。在
CSS
3中，我们可以使用
scale
()方法来将元素根据中心原点进行
缩放
。
跟translate()方法一样，
缩放
scale
()方法也有3种情况：
（1）
scale
X(x)：元素仅水平方向
缩放
（X轴
缩放
）；
（2）
scale
Y(y)：元素仅垂直方向
缩放
（Y轴
缩放
）；
（3）
scale
(x,y)：元素水平方向和垂直方向同时
缩放
（X轴和Y轴同时
缩放
）；
1、
scale
X(x)
transform:
scale
X(x)
css
中
缩放
是使用 transform来控制，参数可为
scale
、
scale
X、
scale
Y等，但常规的
缩放
总以中心点为
基准点
，在很多时候都是很不方便的。
使用transform-origin来进行控制，使用transform-origin属性，可以改变
缩放
的
基准点
。
transform-origin: 10px 10px; // 定义
缩放
原点,相对于左上角的距离x、y，单位px
参数可使用值...
css
3
缩放
transform:
scale
() 使用
缩放
之后顶点对齐问题
注意点：想要将
缩放
之后的div对齐顶点，那么需要将
css
属性设置为：transform-origin: 0 0
<div style="width: 900px; height: 900px; background: gray; overflow: auto;">
<div style="...
关于 Svg 使用 transform：
scale
（）
缩放
后元素发生位移的问题，修改元素
缩放
中心点
接到一个需求，是公司前辈用 svg 写的代码结构，现在要让画布上的元素在发生改变，放大缩小的时候，保持画布不动，让元素实现原地
缩放
，让我们现来看看原本的效果是如何的
当我在点击放大或者缩小的时候元素发生了位移，而现在我需要实现的是元素在原地进行放大和缩小的效果。
有试过给 svg 添加 viewBox 属性，这样确实能让元素实现原地的方法和缩小功能，但是，
缩放
的中心点还是无法改变，而我的项目添加 viewBo
有个需求要让不同分辨率都适配到1080P的效果，以15.6寸1080P笔记本为例，页面
缩放
默认一般是125%，要显示真正的1080P一般是调整浏览器
缩放
80%（Edge），也有部分浏览器默认时125%则
缩放
到100%。那么能不能通过
CSS
实现？我看到主流的处理方法是：
确实可以达到效果，但是当使用Echart、Element部分组件时，会出现
鼠标
定位偏移问题，我就不列举了，因为能查到这里一般是遇到了问题的。那么有没有平替方案呢？当然有：
我们通过
scale
实现的效果和zoom几乎一模一样，同时避免了
一、过渡（transition）
过渡（transition）是
CSS
3中具有颠覆性的特性之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态。
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。
经常和:hover一起搭配使用。
语法：transition：要过渡的属性 花费时间 运动曲线 何时开始；
属性（必须写）：想要变化的
css
属性，
