首页 > 其他分享> > css3的transform属性详解

css3的transform属性详解

2020-03-01 19:36:02 作者：互联网

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