@[TOC]CSStransform属性允许您旋转、缩放、倾斜或平移给定元素。常用的transform属性包括以下属性：translate(0,0)displacementrotate(0deg)rotationscale(1)scalingskew(0deg)obliquecuttingTransform文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform下面说说这几个方法translate()displacementtranslate通过x轴和y轴的参数实现偏移语法：transform:translate(10px,10px);，x轴偏移10px，y轴偏移10px。也可以单独设置某个轴的偏移量。CSS提供了x轴和y轴的语法：transform:translateX(10px);transform:translateY(10px);translate参数可以使用百分比，如果参数是百分比，实际的偏移距离。使用转换：translate(-50%,-50%);实现垂直定位和居中。.box{宽度：20px;高度：20px；背景：#e94242；位置：绝对；左：50%；顶部：50%；转换：翻译（-50%，-50%）；}transform：平移第一个参数偏移自身x轴的50%，第二个参数偏移自身y轴的50%，左边偏移50%。如果本身是100px，那么：left+自身-x轴本身50%=50%+100px-50px=偏移正好居中，y轴也一样。另外，translate不受文档流的影响，方向：ltr；文档流向左，translateX仍然向右偏移。rotate()rotate()用于设置元素的旋转角度，rotate(45deg)是顺时针旋转45°，rotate()的旋转受锚点（transform-origin）的影响，问题的锚点在下方。rotate()有四个单位，分别是：degangle，gradgrad，rad弧度，returncircle。最常用的是deg角，其他日常项目基本不用。.box{宽度：20px;高度：20px；背景：#e94242；变换：旋转（45度）；}scale()scale()有两个参数，语法：transform:scale(参数一，参数二)，分别对应水平方向和垂直方向的放大和缩小，默认值为1（不放大）。变换：比例（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;高度：80px；变换：比例（2,0.5）；/**x轴放大2倍，y轴缩小一半*/}skew()obliqueoblique字面意思是倾斜物体，语法:transform:skew(10deg,5deg)表示水平倾斜10度，垂直倾斜5度。它接受两个参数，第一个参数代表x轴，第二个参数代表y轴。也可以单独倾斜某个轴。CSS提供了x和y轴的语法：transform:skewX(10deg):horizo??ntalskew10degreestransform:skewY(10deg):verticalskew10degrees/*skew()Miter*/.shiftBox{width:80px;高度：80px；背景：#80c342；变换：倾斜（10度，5度）；/**Horizo??ntalskew10degreesverticalskew5degrees*/}Mitercanbeapplyon图形变换，有些图片效果只需要调整x轴和y轴的倾斜角度就可以实现，比clip-path方便在某些场合。例如：实现当前任务的进度显示，只需要画一个矩形，x轴倾斜45度再画一个矩形，x轴倾斜-45°即可实现细节和变换的特征。元素引用transform属性值不会影响元素的大小和位置当我们在日常布局中使用margin或者positioning时，通常会影响到其他元素。例如，在上面的例子中，为第二个按钮设置了margin-left，这导致第三个按钮的位置发生变化。如果第二个按钮使用transform:translateX()偏移，第三个按钮的位置不会受到影响，因为transform属性值不会影响原来的位置。另外，内联元素不受transform特性的影响，必须转为内联块。span{/*内联元素不受transform所有变换特性的影响*/display:inline-block;/*设置内联块后，受transform影响，所以可以解决*/transform:translateX(50px);}参数顺序不同，会影响transform结果的参数会按顺序执行，相同参数位置不同会影响执行结果。.order{宽度：200px；高度：200px；边框：1px纯红色；:nth-child(1){宽度：20px；高度：20px；背景：#4d90fe；转换：translateX(50px)scale(2);/*先平移后放大，顺序影响结果*/}:nth-child(2){width:20px;高度：20px；背景：#80c342；变换：缩放（2）translateX（50px）；/*先放大再移位，顺序影响结果*/}}这里先放大b框，然后执行translateX，按照放大后的比例进行偏移，所以b的偏移更远比一个。有两点需要注意：1.同时使用transform和clip-path时，先crop再transform。2.对于transform和margin，应该优先使用transform以获得更好的性能，因为transform属性的取值不会影响到原来的位置。transform将创建一个新的堆叠上下文。当多个元素堆叠在一起时，通常后执行的元素会覆盖先执行的元素，类似如下：一层接一层，如果要高亮元素，可以设置z-index改变层级。其实这里也可以使用transform。Transform会创建一个新的stackingcontext，后面执行的元素会覆盖先执行的元素。因此，可以在没有z-index的情况下突出层次效果。转换：比例（1）；原来的大小不变，相当于没有对元素进行任何操作，只是改变了堆叠顺序，如下：.layer{width:200px;高度：50px；边框：1px纯红色；左填充：20px；边距：50px；>img{宽度：50px；左边距：-20px；}>img:hover{转换：比例（1）；/*原始尺寸*/box-shadow:0px0px5pxblack;}}fixed定位效果fixed定位fixed：元素会被移出正常的文档流，不为元素保留空间，但是通过指定元素相对于屏幕视口的位置来指定元素的位置（视口）。滚动屏幕时元素的位置不会改变。但是如果fixed的parent有transformset，那么fixed定位就会生效。/*固定定位效果*/.positions{width:200px;高度：50px；边框：1px纯红色；顶部边距：10px；.positionBox{宽度：50px;高度：50px；背景：#80c342；转换：translateX（10px）；.positionInner{宽度：20px；高度：20px；背景：#e94242；右：0px；元素设置溢出：隐藏；不能影响绝对定位的子元素，子内容不能隐藏到父元素范围之外。.overFlow{宽度：100px；高度：100px；背景：#4d90fe；溢出：隐藏；>img{宽度：200px；高度：50px；位置：绝对；/*绝对定位不受overflow:hidden影响*/border:1pxsolidred;但是如果父级设置了transform，溢出的限制就会改变，绝对定位的子元素也会受到影响。overFlow2{宽度：100px；高度：100px；背景：#80c342；溢出：隐藏；变换：规模（1）；/*transform改变溢出的限制，绝对定位的子元素也会受到影响*/>img{width:200px;高度：50px；位置：绝对；底部：0；边框：1px纯红色；}}这里还有一点要注意，img图片已经跑到底部了，因为父元素设置了transform，只要transform属性值不为none，该元素也可以作为该元素的包含块绝对定位的元素，相当于启用了相对位置。transform-origin改变元素变换的中心坐标transform-originCSS属性可以让你改变元素变换的原点。其实就是元素的锚点坐标，默认锚点在元素的中心。.innerBox2{宽度：20px；高度：20px；背景：#e94242；变换：旋转（20度）；/*顺时针旋转20°*/}锚点在中心，顺时针旋转20°，如果改变锚点的位置如果是右上角，会出现如下效果innerBox2{width:20px;高度：20px；背景：#e94242；变换：旋转（20度）；变换原点：右上角；/**受锚点影响*/}锚点可以使用方向关键字或参数。锚点的介绍请看文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin钟摆效果是通过下面的锚点
