位置: IT常识 - 正文
〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形(大前端需要掌握什么技能)
发布时间：2024-01-15推荐整理分享〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形(大前端需要掌握什么技能)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:大前端技术架构,前端 大前端,大前端需要掌握什么技能,大前端2021,前端 大前端,前端 大前端,大前端技术,大前端入门指南,内容如对您有帮助，希望把文章链接给更多的朋友！
变形是CSS3中新增的一个非常有意思的属性，可以将元素进行2D变形和3D变形，例如旋转、缩放、位移等；还可以结合过渡实现一些特别神奇的动画效果。接下来就一起来了解css3这个强大又有趣的功能吧。
⭐️ 2D变形接下来就让我们来学习一下，如何实现 2D变形吧。
🌟 旋转变形transform：变形；
旋转变形：trasform: rotate()；
度数为正，表示顺时针旋转；度数为负，表示逆时针旋转；
下面看几个例子：
🌟 transform-origin属性transform-origin属性用来自定义变换原点。
旋转的时候默认是围绕自己的中心点旋转的。
围绕自己的左上角旋转：transform-origin：0 0；
这个属性用到的比较少，我们看一个简单的例子即可：
🌟 缩放变形缩放变形：transform: scale();
缩放倍数大于1表示放大，小于1表示缩小
下面直接看例子：
缩放变形也可以使用transform-origin来自定义变换的原点；默认是从中心点。
🌟 斜切变形斜切变形：transform: skew();
斜切变形用的也不多，下面直接看例子来观察斜切的效果：
🌟 位移变形位移其实就是位置的移动，和相对定位非常的像。相对定位兼容到IE6，但是位移变形兼容到IE9，是很新的属性。位移变形也会”老家留坑“，”形影分离“。
位移变形：transform: translate();
下面直接看例子：
上一篇：VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了(vscode安装选项)
下一篇：GPT-4 免费体验方法
