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

当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