transform
什么是transform?
transform
可以将2D元素或者3D元素进行旋转,缩放,移动或者是倾斜,其语法如下,当值为none
为默认,其他通过提供的转变函数进行相应的转变
img { transform: none|transform-functions } 复制代码
技术细节
- 对于旋转的元素来说,其盒模型位置不会改变,现在页面上有两对冰墩墩和雪容融,
transform
为默认状态
现在我们为第一个图片附加transfrom
向右移动200像素,效果如下,我们会发现第二张图片的位置没有发生变化,这说明了什么,我们都知道在文档中的文档流的默认的从左到右从上到下,所以这说明了transform
并没有改变我们盒子模型的位置,其盒模型占位并没有发生改变
- 创建层叠上下文
在我们为元素附加transfrom
后他就会创建层叠,由上图就可以了解到,被附加的图片覆盖了第二张图片 - 内联元素属性无效
内联元素我们都知道,一行可以存在多个内联元素,下面三个分别为内联元素,块状元素,替换元素,我们给他们设置了向右平移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);"> 复制代码
- 不同设置顺序不同展示效果
当我们为同一元素附加上同样效果但是顺序不一样的时候,其最后的效果相同吗,下面我们为同样的图片,一个先缩小一半再向右平移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> 复制代码
从图片的效果来看,其不同顺序作用相同的值时,最后的效果是不一样的。