css3如何实现2d转化

这篇文章主要介绍“css3如何实现2d转化”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3如何实现2d转化”文章能帮助大家解决问题。

班戈ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

在css3中,可以使用transform属性配合translate()、scale()、rotate()、skew()、skewX()、skewY()等函数实现元素的2d转化,将元素进行旋转,缩放,移动,倾斜等。

css3如何实现2d转化

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css3中,可以使用transform属性实现2d转化。

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

transform属性实现2d转化的函数

描述
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
translate(x,y)定义 2D 转换。
translateX(x)定义转换,只是用 X 轴的值。
translateY(y)定义转换,只是用 Y 轴的值。
scale(x[,y]?)定义 2D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
rotate(angle)定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。

示例:



	
		
	
	
		
		
			
				

rotate(45deg) 

scale(2)

scaleX(2) 

scaleY(2) 

skew(45deg, 45deg) 

skewX(45deg)

skewY(45deg)

translate(45px) 

translateX(45px)

translateY(45px)

 matrix(2, 2, 0, 2, 45, 0)

css3如何实现2d转化

关于“css3如何实现2d转化”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


当前标题:css3如何实现2d转化
文章来源:http://scyanting.com/article/gpocsj.html