css特殊转换之2D与3D转换

目录

一.css转换的效果

二.2D转换

1.translate()

 2.rotate()

3.scale()

4. skew()

 5.matrix()

三.3D转换

1.rotateX()

 2.rotateY()

3.rotateZ()

 4.其他

---

一.css转换的效果

转换使我们的元素发生大小、位置、形状发生一些改变，分为 2D 和 3D 转换

二.2D转换

需要通过transform属性进行设置。

translate()	方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数） ，注意： 是一种平移效果
rotate()	方法根据给定的角度顺时针或逆时针旋转元素 , 可以取负值，元素进行逆时针旋转
scale()	方法增加或减少元素的大小（根据给定的宽度和高度参数）
scaleX()	方法增加或减少元素的宽度
scaleY()	方法增加或减少元素的高度
skew()	方法使元素沿 X 和 Y 轴倾斜给定角度
skewX()	方法使元素沿 X 轴倾斜给定角度
skewY()	方法使元素沿 Y 轴倾斜给定角度
matrix()	方法把所有 2D 变换方法组合为一个。 参数如下（要按照一定的顺序）： matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

1.translate()

<style type="text/css">
#div2{
		transform:translate(100px,100px);
	}
</style>

 2.rotate()

<style type="text/css">
#div2{
		transform:rotate(10deg);
	}
</style>

3.scale()

<style type="text/css">
#div2{
		transform:scale(0.7,0.7);
	}
</style>

4. skew()

<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		background-color: blue;
		border: 1px solid black;

	}
	#div2{
		transform:skew(10deg,10deg);
	}
</style>

 5.matrix()

	<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		background-color: blue;
		border: 1px solid black;

	}
	#div2{
		transform: matrix(1, 2.3, 4, 5, 6, 7);;
	}
	</style>

三.3D转换

通过 CSS transform 属性

1.rotateX()

rotateX() 方法使元素绕其 X 轴旋转给定角度：

<style type="text/css">
		div{
		width: 100px;
		height: 75px;
		background-color: blue;
		border: 1px solid black;
	}
	#div2{
		transform:rotateX(60deg);
	}
</style>

 2.rotateY()

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

<style type="text/css">
		div{
		width: 100px;
		height: 75px;
		background-color: blue;
		border: 1px solid black;
	}
	#div2{
		transform:rotateY(60deg);
	}
</style>

3.rotateZ()

rotateZ() 方法使元素绕其 Z 轴旋转给定角度

<style type="text/css">
		div{
		width: 100px;
		height: 75px;
		background-color: blue;
		border: 1px solid black;
	}
	#div2{
		transform:rotateZ(150deg);
	}
</style>

 

 4.其他

matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。