使用transform属性的方法-创新互联

小编给大家分享一下使用transform属性的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

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

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

旋转 rotate

用法：

transform: rotate(45deg);

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

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

效果图：

缩放 scale

用法：

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

参数表示缩放倍数；

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

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

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

效果图：

倾斜 skew

用法：

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

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

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

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

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

效果图：

移动 translate

用法：

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

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

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

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

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

效果图：

看完了这篇文章，相信你对使用transform属性的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。