如何使用transform属性-木庄网络博客

2022-03-01 10:40:28 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者清浅，侵删。

通过transform属性可以实现元素的旋转、缩放、倾斜、移动四种类型的转换。

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。接下来在文章中将为大家具体介绍如何使用transform属性

【推荐课程：css3教程】

旋转 rotate

用法：

1	`transform: rotate(45deg);`

一个参数角度，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度

div{
    width:200px;
    height: 200px;
    background-color: pink;
    transform: rotate(55deg);
}

效果图：

缩放 scale

用法：

1	`transform: scale(0.5) 或者 transform: scale(0.5, 2);`

参数表示缩放倍数；

一个参数时：表示水平和垂直同时缩放该倍率

两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

div{
    width:200px;
    height: 200px;
    background-color: pink;
    transform: scale(0.5,1.2)
}

效果图：

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者