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);
当transform: translate(a);里只有一个值时，它是向x轴位移a的距离，
transform: translate(20px);
2、transform: translateX(a); | transform: translateY(a);
单独在x和y轴上进行位移a距离
transform: translateX(30%);
transform: translateY(4em);
缩放scale
1、transform:scale(a,b);元素在x轴上缩放a倍，在y轴上缩放b倍(数值小于1为缩小，大于1为放大)
transform: scale(0.5,2);
当transform: scale( );里的两个数值相同时，可以简写成一个，即transform: scale(a,a);写成transform: scale(a);
transform: scale(0.5);
2、transform: scaleX(a); | transform: scaleY(a);元素单独在x轴和y轴上缩放
a倍。
transform:scaleX(0.7);
transform: scaleY(1.3);
旋转rotatetransform: rotate(a)元素旋转的度数，一般单位为deg(角度)，还有css 3中为我们新增加的角度属性：
grad梯度(100grad=90deg)
rad 弧度(一个圆有2π弧度，1.5707963rad=90deg)
turn 圈(一个圆就是一圈，0.25turn=90deg)
transform: rotate(60deg);
倾斜skew
1、transform: skew(a,b);元素在x轴倾斜a的角度，在y轴上倾斜b的角度，单位为deg
transform: skew(20deg,20deg)；
transform: skew();只有一个值时，表示y轴方向上无倾斜，x轴方向倾斜。transform: skew(20deg);
2、transform: skewX(a) | transform: skewY(a)元素单独在x轴/y轴上进行倾斜a的角度
transform: skewX(30deg);
transform: skewY(30deg);
即明
发布了2 篇原创文章 · 获赞 0 · 访问量 122
私信
关注
标签：css3,scale,skew,元素,transform,详解,轴上,translate
来源： https://blog.csdn.net/m0_46384421/article/details/104597480