前端学习（CSS3 三）——转换、过渡、动画_transform 前端实现上下翻转再回到原来样式动画-CSDN博客

本文链接：https://blog.csdn.net/weixin_43866830/article/details/115272366

本文详细介绍了CSS3的转换、过渡和动画特性。转换包括2D和3D，涉及translate()、scale()、rotate()、skew()等函数；过渡详细解释了transition属性的各子属性；动画讲解了@keyframes的使用和animation属性的配置。

摘要由CSDN通过智能技术生成

一、CSS3转换

1.定义

转换可以对元素进行移动、旋转、缩放、倾斜等，转换就是让某个元素发生形状、大小、位置上的改变。

2.语法

转换的语法如下：

transform:none | <transform-function>*;/*默认值为none*/

none代表不应用任何的转换，而表示要应用的一个或多个CSS变换函数，变换函数主要包括有：
2D转换：平面上的移动、旋转、缩放、倾斜。
3D转换：三维立体上的移动、旋转、缩放。

3.2D转换

2D转换的函数主要包括有：
translate()：移动；
scale()：缩放；
rotate()：旋转；
skew()：倾斜。
这里先附上一张空间上的图示，以下文章会用到：
在这里插入图片描述

translate()

translate(n)表示元素沿着X轴和Y轴移动，translateX(n)表示沿着X轴，translate(n)表示沿着Y轴。具体示例如下：
还未设置移动时：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.box{
   
			width: 500px;
			height: 500px;
			background-color: #00FFFF;
			text-align: center;
			line-height: 50px;
			position: absolute;
		}
		.box1{
   
			width: 500px;
			height: 500px;
			background-color: #FF4400;
			opacity: 0.8;
			position: absolute;
			left: 0;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="box">
		<i class="box1"></i>
	</div>
</body>
</html>

结果：
在这里插入图片描述
设置了偏移后：

.box i{
   
	transform: translateX(100px);
}

结果：
在这里插入图片描述
当值为负值则向左偏移，Y轴偏移同理，就不作演示了。同时translate可以对两个方向同时设置偏移量，语法是：translate(x, y);如果只设置一个参数，会默认第二个参数为0。

scale()

scale()表示元素在X轴和Y轴的缩放。scaleX(n)表示在X轴上的缩放，scaleY(n)表示在Y轴上的缩放。值默认为1，当n>1时，元素放大，当0<n<1时，元素缩小，具体示例如下（与translate同理）：

.box i{
   
	transform: scale(0.8, 0.5);
}

结果：
在这里插入图片描述
与translate()不同的是，如果scale()只设置一个参数，会默认两个参数值都一样。

rotate()

rotate()表示元素顺时针给定的角度，负数表示逆时针旋转，角度图示如下：
在这里插入图片描述
如这里设置顺时针旋转45度：

.box i{
   
	transform: rotate(45deg);
}

在这里插入图片描述

skew()

skew()表示元素在二维平面上的倾斜转换。
skewX(xdeg)表示基于X轴的倾斜，x取值为正时，X轴不动，Y轴逆时针倾斜一定角度，x为负，Y轴顺时针倾斜。
示例：

.box i{
   
	transform: skewX(10deg);
}

结果：
在这里插入图片描述
为负值时：

.box i{
   
	transform: skewX(-30deg);
}

结果：
在这里插入图片描述
skewY()与skewX()同理，这里就不作演示了，skew()同样可以写入两个参数，如果只写入一个参数的话，则默认基于X轴倾斜。
以上这些函数的使用都有涉及到基点，基点默认就是元素的中心点，基点也可以通过属性来设置：

transform-orgin: center;

基点的位置可以通过坐标来设置，例如我们这边设置成“0 0”：

.box i{
   
	transform-origin