2d变换2+总结

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.box,.box1{
			width: 200px;
			height: 100px;
			border:1px solid red;
			margin: 200px;
			display: inline-block;
			position: absolute;
		}
		.box1{
			/*拉伸 skew(x,y)*/
			transform: skew(30deg,30deg);
			border: 1px solid gray;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>
</html>

transform：

这是最主要的变换属性；其实所有变换都是通过这个属性，使用不同的值来实现的。

而所用不同的值，主要就是指定不同的变换函数（一个单词），以及所需要变换的数值；

常用2D变换函数如下：

transform: translatex(值)：将元素水平移动给定的值；

transform: translatey(值)：将元素垂直移动给定的值；
transform: translate(x值，y值)：同时进行水平和垂直移动，比如：translate(15px, 20px)
transform: rotate(角度值)：将元素旋转给定的角度，比如：30deg
1. 旋转的方向是：正值为顺时针方向，负值为逆时针方向；
transform: scalex(比例值)： x方向进行缩放；
transform: scaley(比例值)： y方向进行缩放；
transform: scale(x比值, y比值): 同时进行水平和垂直方向的缩放，scale(1.5, 2)
transform: skewx(角度值)：将元素从x方向拉伸给定的角度；
transform: skewy(角度值)：将元素从y方向拉伸给定的角度；
transform: skew(x角度,y角度): 将元素从x和y方向拉伸给定的角度；

特别注意：

1，对一个元素可以同时进行多项变换。

2，进行多项变换时，多个变换属性值要一并写在一起，相互之间用空格隔开，类似这样：

transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2);

对于进行了变换的元素，虽然形状或位置都可能变了，但并不影响其他元素(即不影响布局效果)。
对于多项变换，即使每项设定的参数一样，但也可能会因为变换的顺序而最终表现不同。

transform-origin：

指定变换时的“原点”（基点）；默认是该变换元素的“中心点”（center, center）；形式：

transform-origin：水平坐标垂直坐标；

其中：水平坐标可以用一个长度值，或百分比，或left，center，right；

垂直坐标可以用一个长度值，或百分比，或top，center，bottom；

猜你喜欢