html中的transform属性,css3的transform属性详解

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);