@[TOC]
CSS transform 属性容许你旋转，缩放，歪斜或平移给定元素。
罕用的transform 属性有上面几个
| 属性 | 阐明 |
|---|---|
| translate(0, 0) | 位移 |
| rotate(0deg) | 旋转 |
| scale(1) | 缩放 |
| skew(0deg) | 斜切 |
transform的阐明文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
上面别离说一下这几个办法
translate() 位移
translate通过x、y轴的参数来实现偏移
语法：transform: translate(10px, 10px); ，x轴偏移10px ，y轴偏移10px。
也能够独自对某一个轴进行偏移设置，css提供了x、y轴的语法：transform: translateX(10px);transform: translateY(10px);
translate的参数能够应用百分比，如果参数是百分比的话，理论的偏移间隔是以本身大小为参考的，例如：一个100px的正方形，translateX(50%)，那么理论x轴的偏移量是本身的100px * 50% = 50px，有了这个个性之后，能够通过transform: translate(-50%, -50%); 的写法实现垂直定位居中。
.box{ width: 20px; height: 20px; background: #e94242; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }transform: translate第一个参数偏移本身x轴的50%，第二个参数偏移本身y轴50%，另外left偏移50%，如果本身100px，
那么：left + 本身 - x轴本身50% = 50% + 100px - 50px = 偏移量正好居中，y轴同理。
另外，translate是不受文档流影响的，direction: ltr;文档流为左，translateX仍然往右偏移。
rotate() 旋转
rotate() 用于设置元素的旋转角度，rotate(45deg)就是顺时针旋转45°，rotate()的旋转受锚点的影响（transform-origin），锚点的问题在下文。rotate() 有四个单位，别离是：deg角度、grad百分度、rad弧度 、return圈度，最罕用的就是deg角度，其它的日常我的项目根本用不到。
.box{ width: 20px; height: 20px; background: #e94242; transform: rotate(45deg); }scale()缩放
scale()有两个参数，语法：transform: scale(参数一 , 参数二)，别离对应横向和纵向的放大和放大，默认值为1（不放大）。
transform: scale(2); /**等比放大2倍 */transform: scaleX(2); /**程度放大2倍 */transform: scaleY(2); /**垂直放大2倍 */transform: scale(2,1); /**x轴放大2倍，y轴不变 */transform: scale(2,0.5); /**x轴放大2倍，y轴放大一半 */.shiftBox{ width: 80px; height: 80px; transform: scale(2,0.5); /**x轴放大2倍，y轴放大一半 */}skew() 斜切
斜切字面意思就是将物体歪斜的意思，语法：transform: skew(10deg, 5deg)示意程度斜切10度 垂直斜切5度，它承受两个参数，第一个参数示意x轴，第二个参数y轴。
也能够独自对某一个轴进行斜切，css提供了x、y轴的语法：transform: skewX(10deg)：程度斜切10度transform: skewY(10deg)：垂直斜切10度
/* skew() 斜切 */.shiftBox{ width: 80px; height: 80px; background: #80c342; transform: skew(10deg, 5deg); /**程度斜切10度 垂直斜切5度 */}斜切能够利用在图形的变换，只通过调整x、y轴的歪斜角度即可实现一些画面成果，某些场合下比裁切属性（clip-path）不便。
例如：实现当前任务的进度展现
这种成果只须要绘制一个矩形，将x轴歪斜45度
再绘制一个矩形，x轴歪斜 -45°即可实现
transform的细节和个性
元素援用transform属性值不会影响元素的尺寸和地位
咱们在日常布局的时候，应用margin或者定位通常会影响到其余的元素
比方下面这个案例，第二个按钮设置了margin-left，导致第三个按钮的地位也发生变化。
如果第二个按钮应用的是transform: translateX()偏移，那么第三个按钮的地位并不会受到影响，因为transform属性值不会影响原始地位
另外，内联元素是不受transform所有的变换个性的影响的，必须转为行内块才能够。
span{ /* 内联元素不受transform所有的变换个性 */ display: inline-block; /* 设置行内块后，受transform影响，解决 */ transform: translateX(50px); }参数的程序不同，会影响后果
transform的参数，会依照先后顺序执行，同样的参数，地位不同则会影响执行后果。
.order{ width: 200px; height: 200px; border: 1px solid red; :nth-child(1){ width: 20px; height: 20px; background: #4d90fe; transform: translateX(50px) scale(2); /* 先位移再放大，程序影响后果 */ } :nth-child(2){ width: 20px; height: 20px; background: #80c342; transform: scale(2) translateX(50px); /* 先放大再位移，程序影响后果 */ }}
这里b盒子先放大后，再执行translateX，依照放大后的比例进行的偏移，所以b的偏移量比a的远。
有两点须要留神：
1、transform和clip-path同时应用时，先裁剪再变换
2、transform和margin，应该优选抉择transform，性能更高，因为transform属性值不会影响原始地位。
transform会创立新的层叠上下文
多个元素叠在一起时，通常后执行的元素会笼罩先执行的元素，相似上面的：
一层叠一层，如果想突出展现元素能够设置z-index来扭转层级，其实这里应用transform也能够实现，transform会创立新的层叠上下文，后执行的元素会笼罩先执行的，所以这里无需z-index也能够实现突出展现层级成果，这里应用了transform: scale(1); 原大小放弃不变，相当于没对元素做任何操作，然而层叠程序扭转了，如下：
.layer{ width: 200px; height: 50px; border: 1px solid red; padding-left: 20px; margin: 50px; >img{ width: 50px; margin-left: -20px; } >img:hover{ transform: scale(1); /*原大小*/ box-shadow: 0px 0px 5px black; }}固定定位实效
固定定位fixed：元素会被移出失常文档流，并不为元素预留空间，而是通过指定元素绝对于屏幕视口（viewport）的地位来指定元素地位。元素的地位在屏幕滚动时不会扭转。
但如果fixed的父级设置了transform，那么固定定位将会实效。
/* 固定定位实效 */.positions{ width: 200px; height: 50px; border: 1px solid red; margin-top: 10px; .positionBox{ width: 50px; height: 50px; background: #80c342; transform: translateX(10px); .positionInner{ width: 20px; height: 20px; background: #e94242; right: 0px; position: fixed; /* 父级设置了transform导致fixed生效 */ } }}扭转overflow对元素的限度
父级元素设置overflow: hidden;是不能对设置了相对定位的子级元素产生影响的，子级内容超出父级范畴不能被暗藏。
.overFlow{ width: 100px; height: 100px; background: #4d90fe; overflow: hidden; >img{ width: 200px; height: 50px; position: absolute; /* 相对定位不受overflow:hidden影响 */ border: 1px solid red; }}
但如果给父级设置了transform，则会更改overflow的限度，相对定位的子元素也受到到影响
.overFlow2{ width: 100px; height: 100px; background: #80c342; overflow: hidden; transform: scale(1); /* transform更改overflow的限度，相对定位的子元素也受到到影响 */ >img{ width: 200px; height: 50px; position: absolute; bottom: 0; border: 1px solid red; }}
在这里还有个留神点，img图片跑到底部了，因为父级元素设置了transform，只有transform属性值不为none的元素也能够作为相对定位元素的蕴含块 ,相当于开启了绝对定位。
transform-origin更改元素变换的核心坐标
transform-origin CSS 属性让你更改一个元素变形的原点。其实就是元素的锚点坐标，默认锚点在元素的核心。
.innerBox2{ width: 20px; height: 20px; background: #e94242; transform: rotate(20deg); /*顺时针旋转20°*/}
锚点在核心，顺时针旋转20°，如果更改锚点的地位为右上角，那么会呈现上面的成果
.innerBox2{ width: 20px; height: 20px; background: #e94242; transform: rotate(20deg); transform-origin: right top; /**受锚点影响 */}
锚点能够应用方向关键字，也能够应用参数。
对于锚点的介绍，请看文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
上面通过锚点实现钟摆成果
<div class="originPointer"></div>.originPointer{ width: 10px; height: 100px; margin: 50px; &::before{ content: ''; width: 10px; height: 10px; position: absolute; background: #80c342; border-radius: 50%; transform: translateY(-50%); } &::after{ content: ''; width: 10px; height: 100px; background: #4d90fe; position: absolute; clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); transform: rotate(0deg); /* transform-origin: top left; */ /* 扭转锚点为左上角 */ transform-origin: 0px 0px; /* 锚点左上角 x轴和y轴，默认终点在最左侧 */ animation: pointer 2s infinite linear; /* 增加linear使画面流程不卡顿 */ } @keyframes pointer { 0% { transform: rotate(0deg); } 25% { transform: rotate(20deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-20deg); } 100% { transform: rotate(0deg); } }}案例源码：https://gitee.com/wang_fan_w/css-diary
如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~