AI 助理
备案控制台
开发者社区 云原生 文章 正文

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

2025-10-09 11
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
可观测监控 Prometheus 版，每月50GB免费额度
任务调度 XXL-JOB 版免费试用，400 元额度，开发版规格
Serverless 应用引擎免费试用套餐包，4320000 CU，有效期3个月
简介： transform变形css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。比transitio

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()具有三种情况：

  1. skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
    • 第一个参数对应X轴，第二个参数对应Y轴。
    • 如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
  2. skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
  3. 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 具有三种情况：

  1. scale(X,Y)使元素水平方向和垂直方向同时缩放 （也就是X轴和Y轴同时缩放）

    注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

  2. scaleX(x)元素仅水平方向缩放（X轴缩放）
  3. 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我们分为三种情况：

  1. translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
  2. translateX(x)仅水平方向移动（X轴移动）
  3. 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);
}

🤩CSS教学往期回顾

  1. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
  2. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
  3. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
  4. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
  5. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
  6. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等

    💕👉博客专栏

文章标签：
前端开发
Java
容器
JavaScript
算法
凉凉心.
目录
相关文章
飞云觅宙
|
云栖大会 开发者
收到阿里云【乘风者计划】博主证书和奖励
收到阿里云【乘风者计划】博主证书和奖励 2023年2月对我来说是一个很好的开端，因为我在1号就收到了阿里云寄给我的【乘风者计划】博主证书和奖励。好兆头啊！ 我收到的是我获得的【技术博主】【星级博主】【专家博主】三个的奖品和证书，一快给我寄过来哒！
飞云觅宙
3040 2
收到阿里云【乘风者计划】博主证书和奖励
阿里云开发者
|
29天前
|
SQL 存储 分布式计算
【万字长文，建议收藏】《高性能ODPS SQL章法》——用古人智慧驾驭大数据战场
本文旨在帮助非专业数据研发但是有高频ODPS使用需求的同学们（如数分、算法、产品等）能够快速上手ODPS查询优化，实现高性能查数看数，避免日常工作中因SQL任务卡壳、失败等情况造成的工作产出delay甚至集群资源稳定性问题。
阿里云开发者
697 33
【万字长文，建议收藏】《高性能ODPS SQL章法》——用古人智慧驾驭大数据战场
凉凉心.
|
21小时前
|
JSON Java API
（ELK）ElasticSearch8.7 搭配 SpringDataElasticSearch5.1 的使用
截至2023/7/11日，全网最全最直白的SpringDataElasticSearch5.1
凉凉心.
25 2
凉凉心.
|
21小时前
|
设计模式 消息中间件 安全
【JUC】（3）常见的设计模式概念分析与多把锁使用场景！！理解线程状态转换条件！带你深入JUC！！文章全程笔记干货！！
JUC专栏第三篇，带你继续深入JUC！ 本篇文章涵盖内容：保护性暂停、生产者与消费者、Park&unPark、线程转换条件、多把锁情况分析、可重入锁、顺序控制 笔记共享！！文章全程干货！
凉凉心.
20 1
凉凉心.
|
23小时前
|
Java 容器
（Java）Java里JFrame窗体的基础操作（组件-1）
如果不熟悉组件，可以将组件看作是某个Form表单中的表单元素，当然这只是在不熟悉组件的前提下。如果深入了解了组件，那么它有着非常多的组件，这些组件可以完善JFrame窗口的布局，以及一些功能； 本篇内容中所有的组件所用到的类全都来自于javax.swing这个包中，记得引入
凉凉心.
12 0
凉凉心.
|
23小时前
|
Java 调度 容器
（Java）JFrame窗体的基本操作(1-窗体的创建)
什么是窗体？ 窗体，是某个程序，在电脑中，手机中的窗口化程序。它在非固定状态下，可以自由的变换大小。同时，窗体，也是容器，窗体这个容器可以在内部处理很多的小组件。 窗体的具体例子：例如，所有的浏览器，浏览器中网页里打开的提示框，电脑的QQ，手机上的小窗模式，都是窗体； 在本篇内容中，我们会使用JFrame和JDialog两个类，在实现java中的窗体； 在JAVA中如何创建窗体？ 在java中，我们需要引入javax.swing包下的JFrame类或者JDialog类，这样才能使用两个窗体；但是，一些窗
凉凉心.
22 0
凉凉心.
|
23小时前
|
Java 数据安全/隐私保护 索引
（Java）Java里JFrame窗体的基本操作(组件篇-3)
回顾 说过了下拉框和下拉列表，本篇内容将了解滚动面板和各类输入框 什么是组件？ 如果不熟悉组件，可以将组件看作是某个Form表单中的表单元素，组件可以完善JFrame窗口的布局，以及一些功能； 本篇内容中所有的组件所用到的类全都来自于javax.swing这个包中，记得引入； 另：在使用组件前，请先将窗体中的内容类给实例化出来进行操作，代码如下： Container c = getContentPane(); JScollPane JScollPane类，说的就是滚动面板。它不同于其他组件，它是一个容器，
凉凉心.
13 0
凉凉心.
|
23小时前
|
Java 虚拟化 容器
（Java）Java里JFrame窗体的基本操作(容器布局篇-1)
容器 容器，我的理解是可以包容其他东西的玩意。它可以是一个盒子，可以是一个虚拟化的物品，可只要能包裹住其他存在质体的东西，那么都可以称作是容器。例如：JPanel组件和JScollPane组件两者都是容器也是组件。 既然有容器，那么容器中的布局就必不可少了。不然不规矩的摆放物品，人类看不习惯，我也看不习惯 ???? 本篇内容，将说明java JFrame窗体里容器中几类布局。 说明：所有在JFrame窗体里的容器布局都会使用setLayout()方法，采用的布局参数都将放进这个方法里 绝对布局 调用窗体容器
凉凉心.
15 0
凉凉心.
|
23小时前
|
SQL 关系型数据库 MySQL
（SQL）SQL语言中的查询语句整理
查询语句在sql中占了挺大一部分篇幅，因为在数据库中使用查询语句的次数远多于更新与删除命令。而查询语句比起其他语句要更加的复杂，可因为sql是数据库不可或缺的一部分，所以即使不懂，也必须得弄懂，以上。
凉凉心.
20 0
凉凉心.
|
22小时前
|
SQL Oracle 关系型数据库
SQL语言小结
针对数据库、表单和数据行的增删改，没有涉及到sql真正的用途也就是查询，sql提供的查询语句的关键字占 sql 语言的一半之多，查询语句还是得单拿出来讲，不然太多了。 因为没有涉及到查询，所以sql的新增和修改都是很笼统的做法，drop、alter drop、delete这些很容易，逻辑性也不强，再次说明sql的真正精髓在于查询，不然为啥叫做结构化查询语言
凉凉心.
24 0

云原生

热门文章

最新文章

  • 1
    Docker CE 镜像源站
  • 2
    Minikube - Kubernetes本地实验环境
  • 3
    微服务架构的理论基础 - 康威定律
  • 4
    微服务（Microservice）那点事
  • 5
    Docker的Windows容器初体验
  • 6
    3分钟，了解阿里云热门开发者工具 Cloud Toolkit
  • 7
    Docker学习路线图 (持续更新中)
  • 8
    当 Kubernetes 遇到阿里云
  • 9
    容器镜像服务 Docker镜像的基本使用
  • 10
    使用阿里云容器服务Jenkins 2.0实现持续集成之Pipeline篇(updated on 2016.12.23)
  • 1
    内存溢出与内存泄漏：解析与解决方案
    11
  • 2
    零代码改造 + 全链路追踪！Spring AI 最新可观测性详细解读
    14
  • 3
    阿里云微服务引擎 MSE 及 API 网关 2025 年 9 月产品动态
    11
  • 4
    小白零代码模板建站：从选模板到上线的完整攻略
    26
  • 5
    图文解析带你精通时序PromQL语法
    72
  • 6
    【GoGin】（3）Gin的数据渲染和中间件的使用：数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
    18
  • 7
    【SpringBoot（三）】从请求到响应再到视图解析与模板引擎，本文带你领悟SpringBoot请求接收全流程！
    21
  • 8
    【Docker】（2）还在浏览网页寻找Docker命令？本文全面列举与使用Docker里的各个命令！想要什么命令直接从本文拿！
    16
  • 9
    【Golang】（3）条件判断与循环？切片和数组的关系？映射表与Map？三组关系傻傻分不清？本文带你了解基本的复杂类型与执行判断语句
    17
  • 10
    【Docker】（3）学习Docker中 镜像与容器数据卷、映射关系！手把手带你安装 MySql主从同步 和 Redis三主三从集群！并且进行主从切换与扩容操作，还有分析 哈希分区 等知识点！
    28

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    深度 | 从0到3.0，揭秘阿里云洛神云网络的进化之路