标签：scale 转换 元素 transform css2d translate 方法 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。