css3 2d转换

Posted 2022-04-23 zy22333

css3的2d转化，我所知的有5种。

1. translate平移
2. rotate旋转
3. scale缩放
4. skew拉伸
5. matrix组合技

因为是css属性，所以必然，2d转化的设置在style中设置基本格式，transform：XXX；以选择哪种转化，还可以设置transition：time；以设置转化时间（不过不能设置在初始状态下，否则无效）

下面按标号进行介绍：

1.translate

有2种设置方式，如transform：translate（a，b）a为x轴上偏移量，b为y轴上偏移量 （网页原点在最左上角，x轴正方向向正右，y轴正方向向正下）。

或translate（a）则a为x，y轴上偏移量，还可以使用translateX，translateY进行指定方向偏移。

2.rotate

transform：rotate（a）a为旋转角度，a为正向顺时针旋转，为负逆时针。

rotate可以设置transform-origin以设置旋转点的位置。

rotateX和rotateY有点意思，他们是关于x，y轴旋转。

3.sclae

transform：scale（a，b）将元素沿x，y方向拉伸a，b倍，transform：scale（a）与transform：scale（a，a）一致

4.skew

transform：skew（a，b）拉着元素最右下角向右和下拉伸a，b角度。我试着设置了一下transform-origin但是效果仅是变化后元素会突然平移，效果很差，这个特性一般应该没用。

欢迎评论??