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

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

倾斜 skew

用法：

1	`transform: skew(30deg) 或者 transform: skew(30deg, 30deg);`

参数表示倾斜角度，单位deg

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

div{
    width:200px;
    height: 200px;
    background-color: pink;
    transform: skew(30deg, 30deg)
}

效果图：

Image 9.jpg

移动 translate

用法：

1	`transform: translate(45px) 或者 transform: translate(45px, 150px);`

参数表示移动距离，单位px，

一个参数时：表示水平方向的移动距离；

两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离

div{
    width:200px;
    height: 200px;
    background-color: pink;
    transform:translate(45px, 150px);
}

效果图：

Image 10.jpg

以上就是如何使用transform属性的详细内容，更多文章请关注木庄网络博客！

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

￥83.86元 人民邮电出版社

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