使用transform属性的方法

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

宜兴网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联公司从2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

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

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

使用transform属性的方法

旋转 rotate

用法:

transform: rotate(45deg);

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

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

效果图:

使用transform属性的方法

缩放 scale

用法:

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

参数表示缩放倍数;

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

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

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

效果图:

使用transform属性的方法

倾斜 skew

用法:

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

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

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

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

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

效果图:

使用transform属性的方法

移动 translate

用法:

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

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

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

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

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

效果图:

使用transform属性的方法

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


本文名称:使用transform属性的方法
路径分享:http://scyanting.com/article/gscopj.html