transfom技术细节

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」

transform

什么是transform？

transform可以将2D元素或者3D元素进行旋转，缩放，移动或者是倾斜，其语法如下，当值为none为默认，其他通过提供的转变函数进行相应的转变

img {
    transform: none|transform-functions
}
复制代码

技术细节

1. 对于旋转的元素来说，其盒模型位置不会改变，现在页面上有两对冰墩墩和雪容融，transform为默认状态

现在我们为第一个图片附加transfrom向右移动200像素，效果如下，我们会发现第二张图片的位置没有发生变化，这说明了什么，我们都知道在文档中的文档流的默认的从左到右从上到下，所以这说明了transform并没有改变我们盒子模型的位置，其盒模型占位并没有发生改变

2. 创建层叠上下文

   在我们为元素附加transfrom后他就会创建层叠，由上图就可以了解到，被附加的图片覆盖了第二张图片

3. 内联元素属性无效

   内联元素我们都知道，一行可以存在多个内联元素，下面三个分别为内联元素，块状元素，替换元素，我们给他们设置了向右平移20像素，但是结果是怎么样的呢？span元素没有移动，其他向右平移了20像素

   <span style="transform: translateX(20px);">我是内敛元素</span>
   <div style="transform: translateX(20px);">我是块状元素</div>
   <img src="./01-bdd-加油.png" alt="" style="transform: translateX(20px);">
   复制代码

4. 不同设置顺序不同展示效果

   当我们为同一元素附加上同样效果但是顺序不一样的时候，其最后的效果相同吗，下面我们为同样的图片，一个先缩小一半再向右平移100像素，一个先向右平移100像素，再缩小一半。

     <div>
       <img src="./01-bdd-加油.png" alt="" style="transform: scale(0.5) translateX(100px);">
     </div>
     <div>
       <img src="./01-bdd-加油.png" alt="" style="transform: translateX(100px) scale(0.5);">
     </div>
   复制代码

从图片的效果来看，其不同顺序作用相同的值时，最后的效果是不一样的。