css2d-3d转换

一.css转换的效果

二.2D转换

1.translate()

 2.rotate()

3.scale()

4. skew()

 5.matrix()

三.3D转换

1.rotateX()

 2.rotateY()

3.rotateZ()

 4.其他

一.css转换的效果
转换使我们的元素发生大小、位置、形状发生一些改变，分为 2D 和 3D 转换
二.2D转换
需要通过transform属性进行设置。

translate()
方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数） ，注意： 是一种平移效果
rotate()
方法根据给定的角度顺时针或逆时针旋转元素 , 可以取负值，元素进行逆时针旋转
scale()
方法增加或减少元素的大小（根据给定的宽度和高度参数）
scaleX()
方法增加或减少元素的宽度
scaleY()
方法增加或减少元素的高度
skew()
方法使元素沿 X 和 Y 轴倾斜给定角度
skewX()
方法使元素沿 X 轴倾斜给定角度
skewY()
方法使元素沿 Y 轴倾斜给定角度
matrix()
方法把所有 2D 变换方法组合为一个。
参数如下（要按照一定的顺序）： matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
1.translate()
<style type="text/css">
#div2{
        transform:translate(100px,100px);
    }
</style>

 2.rotate()
<style type="text/css">
#div2{
        transform:rotate(10deg);
    }
</style>

3.scale()
<style type="text/css">
#div2{
        transform:scale(0.7,0.7);
    }
</style>

————————————————
 

标签：scale,转换,元素,transform,css2d,translate,方法,3d
来源： https://blog.csdn.net/m0_62977692/article/details/122016528