文章目录
- 旋转函数
- rotateX 和 rotateY 的使用
- 移动函数
- 缩放函数
- 过渡
- transition-timing-function 属性
- 动画
旋转函数
- 在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕原点旋转，主要在二维空间内进行操作。
- 其语法格式如下所示：
transform: rotate(角度); /*元素按照指定角度旋转*/
- 这里的角度可以是正值也可以是负值。正负值意味着什么呢？🤔
- 正负值意味着不同的旋转方向，规定参数为正时，顺时针旋转；参数为负时，逆时针旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin: 20px;
display: inline-block;
background-color: chartreuse;
}
/*向右旋转 60 度*/
.c1 {
background-color: #ffe6e6;
transform: rotate(60deg);
}
/*向左旋转 60 度*/
.c2 {
background-color: #a7c5eb;
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="c1"></div>
<div></div>
<div class="c2"></div>
</body>
</html>
rotateX 和 rotateY 的使用
- 除了使用 rotate 函数绕原点来旋转指定元素外，我们还可以围绕指定轴来旋转元素。
- rotateX 函数可以让指定元素围绕横坐标（X 轴）旋转。其使用格式如下所示：
transform: rotateX(角度);
- rotateY 函数可以让指定元素围绕纵坐标（Y 轴）旋转。其使用格式如下所示：
transform: rotateY(角度);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.c1 {
transform: rotateX(70deg);
}
.c2 {
transform: rotateX(180deg);
}
.c3 {
transform: rotateY(45deg);
}
.c4 {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
/>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
class="c1"
/>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
class="c2"
/>
</div>
<div>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
/>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
class="c3"
/>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
class="c4"
/>
</div>
</body>
</html>
移动函数
- translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。其语法格式为：
transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
}
/*沿 X 轴向右移动 20 个像素*/
.c1 {
background-color: #51adcf;
transform: translateX(20px);
}
/*沿 Y 轴向下移动 30 个像素*/
.c2 {
background-color: #ffe5b9;
transform: translateY(30px);
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。
缩放函数
- scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。其语法格式为：
transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin: 30px;
}
.c1 {
background-color: rgba(179, 153, 38, 0.651);
}
/*沿着 X 和 Y 轴进行缩放*/
.c2 {
background-color: #9088d4;
transform: scale(2);
}
/*沿着 X 轴进行缩放*/
.c3 {
background-color: #ffe5b9;
transform: scaleX(2);
}
/*沿着 Y 轴进行缩放*/
.c4 {
background-color: #1c8181;
transform: scaleY(2);
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
- 在页面上有四个 div 元素块，第一个是宽和高均为 50 个像素的正方形元素块，我们另外三个元素块在此基础上进行缩放。
- 第二个元素块使用 transform: scale(2) 让元素同时沿着 X 轴和 Y 轴扩大 2 倍。
- 第三个元素块使用 transform: scaleX(2) 让元素沿着 X 轴扩大 2 倍。
- 第四个元素块使用 transform: scaleY(2) 让元素沿着 Y 轴扩大 2 倍。
过渡
- CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。 其语法如下所示：
transition: 指定属性 持续时间 速度曲线 开始时间;
- 它是一个复合属性，我们也可以如下分开使用这几个属性。
transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
margin-top: 40px;
margin-left: 40px;
width: 50px;
height: 50px;
background-color: #51adcf;
/*ease-in-out 慢速开始慢速结束*/
transition: transform 1s ease-in-out;
}
div:nth-child(2) {
transform: rotate(-60deg);
}
div:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
代码说明如下：
- 在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。
- 在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
- 使用 transition 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function
属性的属性值。
接下来给大家介绍一下 transition-timing-function 属性的取值吧！
transition-timing-function 属性
- transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。
- transition-timing-function 属性有这么多的属性值，我们用 steps 来练习一下吧～ 🤪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin: 50px;
background-color: cornflowerblue;
transition: transform 4s steps(4);
}
div:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。
动画
- @keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示：
@keyframes 动画名
{
0% {样式属性：属性值;}
25% {样式属性：属性值;}
50% {样式属性：属性值;}
100% {样式属性：属性值;}
}
- 这里的百分比是用来规定动画发生变化的时间的，0% 代表动画的开始，100% 代表动画的结束，中间的可以自定义。
- 将 @keyframes 创建的动画绑定到选择器上，通过 animation 属性就能实现动画效果了，其语法格式为：
animation: 动画名 完成动画的周期 是否重复;
- animation 属性是一个复合属性，它的子属性如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.circle {
width: 60px;
height: 60px;
border-radius: 100%;
background-color: #ffd8a6;
animation-name: action;
animation-duration: 9s;
animation-iteration-count: 10;
}
@keyframes action {
0% {
margin-left: 400px;
}
25% {
background-color: #dd7631;
}
50% {
border-radius: 10%;
}
100% {
margin: 100px;
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
