【HTML5】Web前端——第六课：CSS3 的变形属性、过渡属性、动画属性
作者：互联网
知识点：CSS3 的 2D 变形属性、 3D 变形属性、过渡属性、动画属性、多列属性
先导知识：【HTML5】Web前端——第五课：CSS3新增背景属性、文本属性、盒模型属性
CSS3 在原来的基础上增加了变形和动画相关属性，通过这些属性，以前需要用 JavaScript 才能实现的功能，现在可以很轻松地实现。CSS3 的变形功能可以对元素进行位移、旋转、缩放、倾斜 4 种几何变换的操作； CSS3 的动画功能则是和位移、旋转、缩放、倾斜 4 种几何变换操作相结合，从而产生平滑的动画效果。
1、 CSS3 的 2D 变形属性
1.1 transform 属性
transform 属性用于设置元素的变形， 这个属性允许你将元素旋转，缩放，移动，倾斜等。
| 属性值 | 说明 | 参数取值 |
| translate(x,y) | 表示元素水平方向移动 x ，垂直方向移动 y ， 其中 y 可以省略，表示垂直方向没有位移。 | x 和 y 的取值，可以是长度单位，如30px ， 也可以是百分比，如20% |
| translateX(x) | 表示元素水平方向移动 x 。 | |
| translateY(y) | 表示元素垂直方向移动 y 。 | |
| rotate(angle) | 表示元素顺时针旋转 angle 角度 | angle 单位通常是deg ，1 deg = 1 度。比如 45deg |
| scale(x,y) | 表示元素水平方向的缩放比为 x ，垂直方向缩放比为 y ， 其中 y 可以省略，表示 y 和 x 相同，以保持相同缩放比。 | x 和 y 的取值是数字，默认值是 1 大于 1，放大 小于 1，缩小 改变的不是元素的宽高，而是 x 和 y 轴的刻度。 |
| scaleX(x) | 表示元素水平方向的缩放比为 x 。 | |
| scaleY(y) | 表示元素垂直方向的缩放比为 y 。 | |
| skew(angleX angleY) | 表示元素沿着 x 轴方向倾斜 angleX 角度，沿着 y 轴方向倾斜 angleY 角度，其中 angleY 可以省略，表示 y 轴方向不倾斜。 | angleX 和 angleY 取值是数字+ deg ，比如 30deg |
| skewX(angleX) | 表示元素沿着 x 轴方向倾斜 angleX 角度 | |
| skewY(angleY) | 表示元素沿着 y 轴方向倾斜 angleY 角度 | |
| matrix(a,b,c,d,e,f) | 将所有2D变形函数（旋转、缩放、移动及倾斜）组合在一起 | |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增变形属性-王迪</title>
<style type="text/css">
div{
width: 200px;
height: 50px;
border: 1px solid;
background-color: red;
margin-left: 300px;
}
#box2 {
position: absolute;
top:60px;
transform: translate(20px,30px);/*设置元素水平和垂直方向的偏移*/
}
#box3 {
position: absolute;
top:100px;
left:300px;
transform:rotate(45deg);/*设置元素顺时针旋转45度*/
}
#box4 {
position: absolute;
top:180px;
transform: scale(2,1);/*设置元素水平方向缩放比为2，垂直方向缩放比为1*/
}
#box5 {
position: absolute;
top:300px;
transform: skewX(30deg);/*设置元素沿着x轴倾斜*/
}
</style>
</head>
<body>
<div id="box1">盒子1：没有变形</div>
<div id="box2">盒子2：水平方向移动20px，垂直方向移动30px</div>
<div id="box3">盒子3：顺时针，旋转45度</div>
<div id="box4">盒子4：元素水平方向缩放比为2，垂直方向缩放比为1</div>
<div id="box5">盒子5：沿着X轴方向，倾斜30度</div>
</body>
</html>示例练习1：制作如下效果（鼠标移上去，导航栏产生2D变形）
案例知识点： 伪类选择器的使用
案例延伸：试一试给一个元素同时添加多个变形，使用transform属性同时设置多个方法，不同方法之间用空格隔开。
举例：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px); 这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate
1.2 transform-origin 属性
transform-origin 属性用于表示元素旋转的中心点，默认值为 50% 50%。
第一个值，表示元素旋转中心的水平位置，它还可以赋值 left 、right 、center 、长度、百分比；
第二个值，表示元素旋转中心的垂直位置，它还可以赋值 top 、bottom 、center 、长度、百分比。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增变形属性-王迪</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid;
background-image:url(img/头像.jpg);
background-size:cover;
margin: 20px 50px;
float: left;
}
#box2 {
transform: rotate(45deg);/*设置元素顺时针旋转45度*/
}
#box4 {
transform: rotate(45deg);
transform-origin: left top;
}
#box6{
transform: rotate(45deg);
transform-origin: 60% 80px;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2：</div>
<hr style="clear: both;" />
<div id="box3">盒子3</div>
<div id="box4">盒子4</div>
<hr style="clear: both;" />
<div id="box5">盒子5</div>
<div id="box6">盒子6</div>
</body>
</html>
2、 CSS3 的 3D 变形属性
理解空间的三维：向上为-Y，向下为+Y，向左为-X，向右为+X，向前为+Z，向后为-Z。
2.1 transform 属性新增的3个变形函数
| 函数名称 | 说明 | 使用方法 |
| rotateX(angle) | 表示元素沿着X轴旋转的角度，类似于我们的单杠运动。 | transform: rotateX(180deg); |
| rotateY(angle) | 表示元素沿着Y轴旋转的角度 | transform: rotateY(180deg); |
| rotateZ(angle) | 表示元素沿着Z轴旋转的角度 | transform: rotateZ(180deg); |
示例练习2： transform 属性的 3D 变形函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D变形-transform属性-王迪</title>
<style type="text/css">
* { margin: 0; padding: 0;}
ul li {
list-style: none;
float: left;
width: 100px;
margin: 20px;
}
div{
border: 1px solid red;
width: 100px;
height: 100px;
background-image: url(img/头像.jpg);
background-size: cover;
margin: 20px;
float: left;
}
.box2:hover {
transform: rotateX(180deg);
}
.box3:hover {
transform: rotateY(180deg);
}
.box4:hover {
transform: rotateZ(180deg);
}
.box5:hover {
transform: rotateX(60deg) rotateZ(180deg);
}
</style>
</head>
<body>
<ul>
<li>正常显示</li>
<li>沿着X轴旋转180度</li>
<li>沿着Y轴旋转180度</li>
<li>沿着Z轴旋转180度</li>
<li>沿着X轴旋转60度,沿着Z轴旋转180度</li>
</ul>
<hr style="clear: both;" />
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
2.2 transform-style属性
transform-style 属性是 3D 空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat 和 preserve-3d 。 transform-style属性的使用语法非常简单：
- transform-style: flat; 默认值，表示所有子元素在2D平面呈现。
- transform-style: preserve-3d; 表示所有子元素在3D空间中呈现。
关键代码：
<style type="text/css">
#box1 {
width: 200px;
height: 100px;
transform-style: preserve-3d;
background-color: red;
}
img {
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div id="box1">
<img src="img/小熊3.jpg" />
</div>
</body>transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫使子元素出现在同一平面（和元素设置了transform-style为flat一样的效果）（可以修改上述代码，验证一下效果）
2.3 perspective属性
perspective的中文意思是：透视，视角。没有透视定义，不成 3D 。对于 perspective 属性，我们可以简单的理解为视距，用来设置用户和元素 3D 空间 Z 平面之间的距离。而其效应由他的值来决定，值越小，用户与 3D 空间 Z 平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与 3D 空间 Z 平面距离越远，视觉效果就很小。
CSS3中3D transform 的透视点是在浏览器的前方！ 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 perspective(n) 定义视点离屏幕的距离。
- perspective 取值为none或不设置，就没有真 3D 空间。
- perspective 取值越小，3D效果就越明显，也就是你的眼睛越靠近真 3D。
- perspective 的值无穷大，或值为 0 时与取值为 none 效果一样。
3、 CSS3 的过渡属性实现动画效果
CSS3 增加了一些过渡属性，可以为元素增加过渡动画效果，也可以设置在一定的时间内逐渐从一种样式变成另一种样式。过渡 transition 是一个复合属性，包括 transition-property、transition-duration、transition-timing-function、transition-delay 这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。
| 属性 | 作用 | 属性值 |
| transition-duration | 设置完成过渡的整体时间 | 时间，如 2s |
| transition-delay | 设置开始过渡动画的，延迟时间 （多长时间以后，开始实现过渡） | 时间，如 2s |
| transition-property | 设置将哪条css使用过渡 | none all css属性名称列表 |
| transition-timing-function | 设置过渡的时间曲线 | ease：慢速开始，然后变快，最后慢速结束 linear：以相同速度开始至结束的过渡效果 ease-in：以慢速开始 ease-out：以慢速结束 ease-in-out：以慢速开始和结束的过渡效果 cubic-bezier(x1,y1,x2,y2)：贝济埃曲线控制动画速度 |
| transition | 一条声明，设置所有过渡属性 | 值之间，用空格隔开 |
复合属性
过渡 transition 的这四个子属性只有 <transition-duration> 是必需值且不能为 0 。其中，<transition-duration> 和 <transition-delay> 都是时间。当两个时间同时出现时，第一个是<transition-duration>，第二个是 <transition-delay> ；当只有一个时间时，它是<transition-duration>，而 <transition-delay> 为默认值0
示例练习3： transition 属性实现的动画过渡
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition属性-王迪 </title>
<style type="text/css">
div{/*设置div基本的样式*/
width: 200px;
height: 100px;
background-color: red;
margin: 10px;
}
div:hover{/*设置div需要变化的样式*/
width:500px;
}
#box1{
transition: width 2s;/*设置过渡属性*/
}
</style>
</head>
<body>
<div id="box1">设置transition属性</div>
<div id="box2">宽度变化直接完成</div>
</body>
</html>案例思考：
1、试一下改变元素的背景属性、或者改一下元素的透明度。
2、设置元素多个属性同时发生变化，过渡属性如何写？
3、完成以下效果：鼠标移上去以后，元素放大1.5倍，同时旋转90度，如何实现？推荐阅读：HTML+CSS项目实践三：鼠标悬浮在图片上时，图片有一个简单动画效果（放大、旋转等）
4、 CSS3 的动画属性
4.1 什么是动画？
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，我们将形成连续性画面的任意一张图片称为桢或动画帧，它是构成动画的最小单元，CSS 中专门提供了创建动画帧的属性，并以此为基础在网页中创建动画。
4.2 @keyframes
@keyframes 是 CSS 中提供的专门用于定义动画关键帧的语法词。我们用它来创建动画，然后用 animation 属性来调用动画。
使用步骤：
- 第一步：@keyframes 用来定义动画序列。
- 以百分比规定改变发生的时间，如 0 和 100%。0 是动画的开始时间，100% 是动画的结束时间。
- 也可以通过关键词 from 和 to 定义，等价于 0 和 100% 。
- 第二步：给想调用动画的元素，添加 animation 属性，用来为标签盒子引用动画序列，同一个动画序列可以被多个标签盒子引用。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@keyframes-王迪 </title>
<style type="text/css">
div{/*设置div基本的样式*/
width: 200px;
height: 100px;
background-color: red;
margin: 10px;
}
/*创建一个动画，名称自己起，这里叫move*/
@keyframes move{
from {/*设置动画从哪里开始*/
width: 100px;
}
to{/*设置动画到哪里结束*/
width: 300px;
}
}
#box1{
animation: move 3s infinite;/*使用animation属性,调用动画move*/
}
</style>
</head>
<body>
<div id="box1">设置循环播放动画</div>
<div id="box2">对比用的div</div>
</body>
</html>
4.3 animation 属性
animation 属性是一个简写属性，用于设置六个动画属性：
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
推荐阅读内容：
HTML+CSS项目实践一：单纯利用CSS制作图片轮播效果（不使用JS）
HTML+CSS项目实践五：使用纯CSS实现点击文字切换图片效果（不使用JS）
===========这里是结束分割线=============
标签：CSS3,动画,第六课,元素,transform,设置,3D,属性 来源： https://blog.csdn.net/dnruanjian/article/details/109800953