这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

忧虑像一把摇椅

它可以使你有事做

但不能使你前进一步

- 2024.04.10 -

在深入探讨CSS变形动画之前，让我们先探讨一下掌握它之后你可以实现哪些有趣的效果。

学习了CSS变形动画之后，你将能够为你的网页添加引人注目的动态效果，例如创建一个立体的3D魔方，或者设计一个引人入胜的旋转菜单。这些仅仅是众多可能性中的一小部分，但或许可以勾起我们的学习兴趣。

一、什么是CSS变形动画？

CSS变形动画是利用CSS3的transform属性创建的动画效果。它可以使元素旋转、缩放、倾斜甚至翻转，让静态的网页元素动起来，为用户带来更加丰富的交互体验。

坐标系统

首先我们要学习的变形动画，想达到在上图中出现的3D效果单纯的X与Y两个轴是实现不了的，还需要加入一条纵深轴，即Y轴的参与才有一个3D的视觉感受。

那么如何来理解X,Y,Z这三条轴的关系呢？可以看一下下面这张图。

• X轴代表水平轴
• Y轴代表垂直轴
• Z轴代表纵深轴

X和Y轴都非常好理解，怎么理解这个Z轴呢？

CSS的中文名称叫做层叠样式表，那么它肯定是一层一层的。之前学习过z-index就是用来设置层的优先级，优先级越高越在上面，也可以理解为离我们肉眼越近，它把优先级低的层给盖住了，所以Z轴可以理解为我们观察的视角与被观察物体之间的一条轴。

• Z轴数值越大，说明观测距离越远。
• Z轴的数值可以无限大，所以设置的时候一定要小心。

二、变形操作

使用 transform 来控制元素变形操作，包括控制移动、旋转、倾斜、3D转换等。

下面我们通过一些例子来演示一下，比较常用的变形操作：

2.1 位移 translate()

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

想象一下，当你滚动页面时，一个元素平滑地从一个位置滑向另一个位置，这种流畅的过渡效果可以大大提升用户体验。

translate我们分为三种情况：

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

2）translateX(x)仅水平方向移动（X轴移动）

3）translateY(Y)仅垂直方向移动（Y轴移动）

实例演示：通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。

HTML代码：

<div class="wrapper">
<div>我向右向下移动</div>
</div>

CSS代码：

.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}

演示结果：

2.2 旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。旋转不仅可以是固定的度数，还可以是动态变化的，创造出无限的可能性。

它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示：

HTML代码：

<div class="wrapper">
<div></div>
</div>

CSS代码：

.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

演示结果：

2.3 扭曲 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轴扭曲变形）

示例演示：

通过skew（）函数将长方形变成平行四边形。

HTML代码：

<div class="wrapper">
<div>我变成平形四边形</div>
</div>

CSS代码：

.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}

演示结果：

2.4 缩放 scale()

缩放 scale()函数 让元素根据中心原点对对象进行缩放。这不仅可以用来模拟放大镜效果，还可以创造出元素的进入和退出动画，比如一个图片慢慢缩小直至消失。

缩放 scale 具有三种情况：

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

例如：

div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform: scale(1.5,0.5);
}

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

2）scaleX(x)元素仅水平方向缩放（X轴缩放）

3）scaleY(y)元素仅垂直方向缩放（Y轴缩放）

HTML代码：

<div class="wrapper">
<div>我将放大1.5倍</div>
</div>

CSS代码：

.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5);
}

演示结果：

注意：scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

2.5 矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素。

此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。

示例演示：通过matrix()函数来模拟transform中translate()位移的效果。
HTML代码：

<div class="wrapper">
<div></div>
</div>

CSS代码：

.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform: matrix(1,0,0,1,50,50);
}

演示结果：

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！「链接」

2.6 原点 transform-origin

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。

但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

示例演示：

通过transform-origin改变元素原点到左上角，然后进行顺时旋转45度。

HTML代码：

<div>
<div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
<div>原点重置到左上角</div>
</div>

CSS代码：

.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);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}

演示结果：

以上就是css动画中几种基本的变形技巧了，掌握这些我们可以操控我们的网页元素实现我们想要的一些基本动画效果。

在这个充满创造力的时代，CSS变形动画是每个前端开发者必备的技能。它不仅能提升用户体验，更能激发设计师和开发者的创意火花。所以，不妨尝试一下，让你的网页动起来，给用户留下深刻的印象吧！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

ranslate移动变形

translate()移动画布, rotate()旋转画布。

canvas中不能只移动某一个对象, 移动的都是整个画布。

canvas中不能只旋转某一个对象, 旋转的都是整个画布。

但是可以用save()、restore()来巧妙设置, 实现让某一个元素进行移动和旋转。

移动变形、移动的是整个画布、而不是某个元素, 在ctx.translate()之后绘制的语句都将被影响。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
ctx.translate(100, 100); //将画布坐标系移动，坐标系就发生变化了
ctx.fillRect(0, 0, 100, 100); //相对于移动后的坐标系开始画画
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
ctx.translate(100, 100); //将画布坐标系移动，坐标系就发生变化了
ctx.fillRect(0, 0, 100, 100); //相对于移动后的坐标系开始画画
ctx.beginPath();
ctx.arc(100, 100, 100,0 , 6.28, false);
ctx.fillStyle ="skyblue";
ctx.fill();
</script>
</html>

save()保存和restore()恢复

ctx.save()表示保存上下文的物理性质, ctx.restore()表示恢复最近一次的保存。

save表示保存sava函数之前的状态, restore表示获取save保存的状态。

移动了的元素, 会影响不需要移动圆点坐标的元素, 所以可以使用以上两个方法保存起来, 可以解决让某一个元素移动变形不受影响。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
ctx.save();
ctx.translate(100, 100); //将画布坐标系移动，坐标系就发生变化了
ctx.fillRect(0, 0, 100, 100); //相对于移动后的坐标系开始画画
ctx.restore()
ctx.beginPath();
ctx.arc(100, 100, 100, 0 , 6.28, false);
ctx.fillStyle ="skyblue";
ctx.fill();
</script>
</html>

rotate()旋转变形

旋转的是整个坐标系, 坐标系以0,0点为中心点进行旋转。

rotate(1)的参数, 是弧度, 旋转的也不是矩形, 而是画布。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
ctx.save();
ctx.translate(150,150)
ctx.rotate(1); //1表示57.3度（1弧度）
ctx.fillRect(-50, -50, 100, 100); //相对于移动后的坐标系开始旋转
ctx.restore()
</script>
</html>

旋转动画