【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵多个参数

用户11865655

发布于 2025-10-13 17:56:40

17600

代码可运行

文章被收录于专栏：CSDN专栏CSDN专栏

运行总次数：0

代码可运行

transform变形

css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。 transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。比transition动画功能更强大的是animation动画，animation动画同样可以和位移、旋转、缩放、倾斜这4种几何变换结合，但它可以指定多个关键帧，从而允许定义更加丰富的自定义动画。

transform：该属性用于设置变形，该属性支持一个或多个变形函数。

rotate(angle):该函数用于设置元素旋转的度数。
- 例如：transform：rotate(30deg);
skew(sx,yx):该函数用于设置元素的一个扭曲效果。
- 例如：transform:skew(10deg,20deg);
scale(sx,xy):该函数用于设置元素的缩放效果。
translate(tx,ty):该函数用于设置元素的位移。
matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵，后面的dx,dy主要是指在坐标轴上的一个偏移量。

rotate-旋转

旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。

它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

如果这个值为正值，元素相对原点中心顺时针旋转；
如果这个值为负值，元素相对原点中心逆时针旋转

<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>01变形--旋转 rotate()</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="wrapper">
      <div><span>哈哈，旋转旋转(^_^)</span></div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
.wrapper {
	margin: 100px auto;
	width: 300px;
	height: 200px;
	border: 2px dotted #0F0;
}
.wrapper div {
	width: 300px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	background: #093;
	color: #fff;
	font-size:20px;
	transform:rotate(30deg);
/*	-webkit-transform:rotate(-30deg);
	-moz--transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	-mz-transform:rotate(-30deg);*/
	/*为什么要加前缀 ？
	css标准中各个属性都要经历从草案到定稿的过程，
	css3中的属性进展都不一样。浏览器厂商在标准尚未
	明确情况下提前支持会有风险，而且各个浏览器对CSS3的支持
	也不同，所以每种浏览器使用了自己的私有前缀与标准进行区分，
	当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性
	
	目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。
		*/
	/*    前缀          浏览器
		-webkit  		chrome和safari
		-moz            firefox
		-mz             IE
		-o               opera
		注意：IE9版本以下不支持，所以就算加上前缀也是没用的。
	*/
}
.wrapper span {
	display: block;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	transform: rotate(30deg);
}

skew参数-扭曲

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。

skew() 函数不会旋转，而只会改变元素的形状。

Skew()具有三种情况：

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
- 第一个参数对应X轴，第二个参数对应Y轴。
- 如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02变形--扭曲 skew ()</title>
<link href="css/skewStyle.css" rel="stylesheet" type="text/css"/>
</head>

<body>
	<div class="wrapper">
    	<div><span>我被扭曲了</span></div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 300px;
	height: 200px;
	margin: 100px auto;
	border: 2px dotted #03F;
}
.wrapper div {
	width: 300px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	background: #09F;
	transform:skew(10deg,10deg);
	/*transform:skewY(-10deg);*/
	/*transform:skew(10deg);
	-webkit-transform:skew(10deg);
	-moz-transform:skew(10deg);*/
	
}
.wrapper span {
	display: block;
	-webkit-transform: skewY(-10deg);
	-moz-transform: skewY(-10deg);
	transform: skewY(-10deg);
}

scale参数-缩放

缩放 scale()函数让元素根据中心原点对对象进行缩放。

缩放 scale 具有三种情况：

scale(X,Y)使元素水平方向和垂直方向同时缩放 （也就是X轴和Y轴同时缩放） 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03变形--缩放 scale()</title>
<link href="css/sytle.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrapper">
  <div><span>放大1.2倍</span></div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
.wrapper {
	height: 200px;
	width: 300px;
	margin: 100px auto;
	border: 2px dotted #00F;
}
.wrapper div {
	height: 150px;
	width: 200px;
	line-height: 150px;
	margin: 25px auto;
	text-align: center;
	font-size: 20px;
	color: #fff;
	background: #C09;
}
.wrapper div:hover{
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
}
/*.wrapper div:hover {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	/*transform:scaleX(1.2);
	transform:scaleY(1.2);*/

translate 移动

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况：

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>04变形--位移 translate()</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrapper">
  <div><span>水平方向移动20px,垂直方向移动40px;</span></div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}
.wrapper{
	width:400px;
	height:200px;
	margin:100px auto;
	border:2px dotted #93F;
}
.wrapper div{
	width:400px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-size:20px;
	color:#fff;
	background:#09F;
}
.wrapper div:hover{
	/*transform:translate(20px,40px);
	-webkit-transform:translate(20px,40px);
	-moz-transform:translate(20px,40px);*/
	/*transform:translateX(30px);*/
	transform:translate(40px,30px);
}

matrix矩阵

matrix() 是一个含六个值的(m11,m12,m21,m22,dx,dy)变换矩阵，用来指定一个2D变换

相当于直接应用一个[m11 m12 m21 m22 dx dy]变换矩阵。

就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下 CSS3 中的 transform 有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。

下列案例实现translate案例中的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>05变形--矩阵 matrix()</title>
<link  href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrapper">
  <div><span>水平方向移动20px,垂直方向移动40px;</span></div>
</div>
</body>
</html>

transform-origin原点

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，

我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

关键字	百分数
top=top center	50% 0
left=left center	0 50%
bottom=bottom center	50% 100%
right=right center	100%
center=center center	50% 50%
top left=left top	0 0
top right=right top	0 100%
bottom left =left bottom	100% 100%
bottom right=right bottom	100% 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>06变形--原点 transform-origin</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrapper">
  <div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
  <div>原点重置到上中（top=top center）</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}
.wrapper {
  width: 300px;
  height: 300px;
  float: left;
  margin: 100px;
  border: 2px dotted red;
  line-height: 300px;
  text-align: center;
}
.wrapper div {
  background: orange;
  -webkit-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
transition: all 1s;
}
.transform-origin div {
  /*-webkit-transform-origin: left;*/
  transform-origin: 50% 0;
}
.transform-origin div:hover{
	transform: rotate(-45deg);
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-09-20，如有侵权请联系 cloudcommunity@tencent.com 删除

matrix