2D变换

最新推荐文章于 2023-05-08 20:07:15 发布

?� ?? � ?

最新推荐文章于 2023-05-08 20:07:15 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/Cg_Companion_Xi/article/details/103554384

版权

CSS2D Transform 表示2D变换，目前获得各主流浏览器支持，但是CSS3D Transform 支持程度不是很完善，仅能够在部分浏览器中获得支持。transform 属性语法：
transform:none | [ ];
transform 属性的初始值是none ,适用于快级元素和行内元素。
设置变换函数。可以是一个或多个变换函数列表。 transform-function 函数包括 matrix()、 translate() 、scale() 、 scaleX() 、scaleY() 、 rotate() 、skewX() 、 skewY() 、skew()等。
matriX(): 定义矩阵变换，即基于X和Y坐标重新定位元素的位置。
translate(): 移动元素对象，即基于X和Y坐标重新定位元素。
scale(): 缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数和负数，以及小数。
rotate(): 旋转元素对象，取值为一个度数值。
skew(): 倾斜元素对象，取值为一个度数值。

旋转
rotate() 函数能够旋转指定的元素对象，它主要在二维空间内进行操作，接收一个角度参数值，用来指定旋转的幅度。
语法：rotate ()
代码：

 <style type="text/css">
	div{
		margin: 100px auto;
		width: 200px;
		height: 50px;
		background:red;
		border-radius: 12px;
	}
	div:hover{
		-webkit-transform:rotate(-90deg);
		-moz-transform:rotate(-90deg);
		-o-transform:rotate(-90deg);
		transition: rotate(-90deg);
	}
</style>
<body>
<div></div>     
</body>
</html>

缩放
scale()函数能够缩放元素大小，该函数包含两个参数值，分别用来定义宽和高缩放比例。
语法： scale ( [ , number])
number 参数值可以是正数、负数、和小数。正数值基于指定的宽度和高度将放大元素。负数值不会缩小元素，而是翻转元素（如文字被反转）,然后再缩放元素，使用小于1的小数（如0.5）可以缩小元素。如果第2个省略，则第2 个参数等于第1个参数值。
代码：鼠标移入时，会放大

  <style type="text/css">
	div{
		margin: 100px auto;
		width: 200px;
		height: 50px;
		background:red;
		border-radius: 12px;
 		box-shadow: 2px 2px 2px #999;
	}
	div:hover{
		-webkit-transform:scale(1.5);
		-moz-transform:scale(1.5);
		-o-transform:scale(1.5);
		transition: scale(1.5);
	}
</style>
<body>
<div></div>
</body>
</html>

移动
translate() 函数能够重新定位元素的坐标，该函数包含两个参数值，分别用来定义x 轴和 y 轴坐标。
语法：translate ( [, ] )
参数表示坐标值，第1个参数表示相对于原位置的x 轴偏移距离，第2 个参数表示相对于原位置的y轴偏移距离，如果省略了第2个参数，则第2 个参数值默认为0.

skew倾斜扭曲
skew函数能够让元素倾斜显示，它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定角度倾斜，rotate函数只是旋转，不会改变元素的形状，skew函数不会旋转，而只会改变元素的形状。
水平方向扭曲变形。
在这里插入图片描述
transform-origin:20% 40%把旋转、缩放的中心点改成x轴的20%的位置，y轴的40%的位置。
2D转换

?� ?? � ?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2D变换

CSS2D Transform 表示2D变换，目前获得各主流浏览器支持，但是CSS3D Transform 支持程度不是很完善，仅能够在部分浏览器中获得支持。transform 属性语法：transform:none | [ ];transform 属性的初始值是none ,适用于快级元素和行内元素。设置变换函数。可以是一个或多个变换函数列表。 transform-function 函...
复制链接

扫一扫