css3基础知识点--transform 2D转换

最新推荐文章于 2024-09-05 18:36:59 发布

翻滚吧阿俊~~

最新推荐文章于 2024-09-05 18:36:59 发布

阅读量459

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40283570/article/details/94447284

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

transform变换

2D转换默认是以中心点为基点，基点是可以改变的。

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		div{
			width: 150px;
			height: 100px;
			margin:20px auto 0;
			background-color: #8AC007;
			font:18px/100px 'microsoft Yahei';
			text-align: center;
			transition: all 500ms ease;
		}
		div:first-child:hover{
			transform:translateX(50px)
		}

		div:nth-child(2):hover{
			transform:translateY(50px)
		}
		div:nth-child(3):hover{
			transform:translate(50px,50px);
		}
		div:nth-child(4):hover{
			/*transform: scaleX(2);*/
			transform: scaleX(0.2);
		}
		div:nth-child(5):hover{
			transform: scaleY(2);
			/*transform: scaleY(0.2);*/
		}

		div:nth-child(6):hover{
			/*transform: scale(2,0.2);*/
			/*垂直翻转：*/
			transform: scale(1,-1);
			/*水平翻转*/
			/*transform: scale(-1,1);*/

		}
		div:nth-child(7):hover{
			transform: rotate(180deg);
		}
		div:nth-child(8):hover{
			transform: skewX(30deg);
		}
		div:nth-last-child(2):hover{
			transform:skewY(30deg);
		}
		div:last-child{
			width: 200px;
		}
		div:last-child:hover{
			transform: skew(30deg,30deg);
		}
	</style>
</head>
<body>
	<div>translateX</div>
	<div>translateY</div>
	<div>translate(x,y)</div>
	<div>scaleX</div>
	<div>scaleY</div>
	<div>scale(x,y)</div>
	<div>ratate(deg)</div>
	<div>skewX(angle)</div>
	<div>skewY(angle)</div>
	<div>skew(x-angle,y-angle)</div>
</body>
</html>