transform变形属性(主要讨论2D)
css 3的transform属性可以修改css中可视化模型的坐标空间,元素通过transform属性进行移动(translate)、旋转(rotate)、缩放(scale)以及倾斜(skew)
注意:规范中有规定——如果元素的transform值不为none,则该元素会生成包含块的创建和层叠上下文
包含块的创建和层叠上下文会影响子元素的一些属性(这里我只是简单阐述一下概念,后期会更新一篇关于层叠上下文的文章): 举个例子——当一个元素所包含的子元素设置了 position:fixed;,而该元素的transform的值不为none时,那么该元素的子元素position:fixed;不再基于视口(viewport)进行定位,而是基于该元素进行定位,这就是涉及到层叠上下文了。
下面一起来看一下transform属性及其属性值:
首先语法:transform: < transform-function > [ < transform-function > ]* |none;属性值为none(默认)或者至少一个transform-function函数.
位移translate:
1、transform: translate(a,b);元素向x轴方向位移a的距离,向y轴的方向位移了
b的距离
transform:translate(10px,20px);