css transform 转换

最新推荐文章于 2024-05-31 14:59:34 发布

＊且听风吟

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量215

点赞数

分类专栏： # CSS 文章标签： css html5 javascript

本文链接：https://blog.csdn.net/HH18700418030/article/details/97373902

版权

CSS 专栏收录该内容

55 篇文章 5 订阅

订阅专栏

css的 transform 属性应用于元素的2D或3D转换。

使用这个属性可将元素进行旋转，缩放，移动，倾斜等操作。

例子：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>transform 转换</title>
  <style>
	*{
		margin: 0;
		padding: 0;
	}
	.content{
		width: 200px;
		height: 100px;
		margin: 100px 100px;
		background: pink;	
		text-align: center;
	}
	
	.content:hover{
		width: 300px;
	}
  </style>
 </head>
 <body>
	<div class="content">transform 转换</div>
 </body>
</html>

效果如下：
在这里插入图片描述

rotate

rotate()：定义了元素的2D旋转转换；“deg”是“度”的意思，如“10deg”表示“10度”。

例如下面的例子，鼠标移上去之后：

		transform: rotate(10deg);
		-webkit-transform: rotate(10deg); /* Safari */
		-moz-transform: rotate(10deg);

页面效果：
在这里插入图片描述

skew

skew()：定义了元素沿着X轴和Y轴的2D倾斜转换；

	.content:hover{
		width: 300px;
		transform: skew(10deg);
		-webkit-transform: skew(10deg); /* Safari */
		-moz-transform: skew(10deg);
	}

页面效果：
在这里插入图片描述

scale

scale(x,y)：定义了元素的 2D 缩放转换比例。
可以传2个值，括号里如果只写了一个值时，则表示xy都一样。“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负值。

	.content:hover{
		width: 300px;
		transform: scale(2.0);
		-webkit-transform: scale(2.0); /* Safari */
		-moz-transform: scale(2.0);
	}

页面效果：
在这里插入图片描述

translate

translate(x,y)：定义了元素的2D位移变动；
向右或者向下移则值为正，向左向上位移则为负值。
下面的例子，元素向右和向上移动了：

	.content:hover{
		width: 300px;
		transform: translate(50px,-50px);
		-webkit-transform: translate(50px,-50px); /* Safari */
		-moz-transform: translate(50px,-50px);
	}

页面效果：
在这里插入图片描述

matrix

matrix(n,n,n,n,n,n) 定义了元素的 2D 转换，使用六个值的矩阵。

	.content:hover{
		width: 300px;
		transform: matrix(2,2,0,2,45,0);
		-webkit-transform: matrix(2,2,0,2,45,0); /* Safari */
		-moz-transform: transformmatrix(2,2,0,2,45,0);
	}

页面效果：
在这里插入图片描述