分为三个部分：
1.变换 2. 动画 3. 动效案例
1. 变换
【1】场景
【2】坐标系
1.2 2D变换
translateX(50%)与left(50%)区别
前者：自身的50%
后者：盒子的50%
1.2.1 2D变换之平移
【1】语法
【2】案例
1.2.2 2D变换之旋转
【1】语法
【2】代码
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
border-radius: 50%;
border: 1px solid #000;
margin: 130px;
/* 过渡写在img是鼠标离开时也会慢慢恢复原样 */
/* transition: all 1s; */
/* 也可以改变旋转的中心点 */
transform-origin: left;
}
img:hover {
/* 过渡如果写在:hover 里，鼠标离开时会快速恢复原样 */
transition: all 1s;
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="../images/cat1.jpg" alt="">
</body>注意事项：
1.行内元素不可以旋转，要么display:block;要么display:inline block;
即转换为块级元素或者行内块级元素
2.鼠标过渡加在不同位置的区别
1.2.3 2D变换之缩放
【1】语法
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
.box2 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box1:hover {
/* 特点不影响其他盒子的布局 */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>1.2.4 2D变换之倾斜
【1】语法
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 55px;
text-align: center;
line-height: 55px;
color: #fff;
background-color: pink;
/* 倾斜效果 */
/* 字体也会倾斜 */
transform: skewX(-16deg);
}
.card {
width: 240px;
height: 280px;
margin: 50px;
/* 子绝父相 */
/* 这样儿子的定位就会以父盒子为参考点 */
position: relative;
}
.card div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 0px 30px 40px 40px;
/* 调整一下倾斜中心为左上角 */
transform-origin: top left;
/* 添加过渡效果 */
transition: all 0.5s;
}
.card .front {
/* 想让这个透明的在前面 */
z-index: 1;
background-color: rgba(0, 0, 0, 0.4);
}
/* 鼠标经过card里面的back倾斜变大 */
.card:hover .back {
transform: skewY(15deg);
width: 200px;
}
/* 鼠标经过card里面的back倾斜变大时，front会上移 */
.card:hover .front {
transform: translateY(-3px);
}
.card .back {
background-color: purple;
/* 添加倾斜效果 */
transform: skewY(8deg);
}
</style>
</head>
<body>
<div class="box">英雄联盟</div>
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</body>1.2.5 过渡进阶
注意：持续时间不能省略，其他都有默认值
1.2.6 变换函数的复合写法
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1000px;
height: 100px;
border: 1px solid red;
}
img {
width: 100px;
transition: all 2s;
}
/* 经过box时，里面的img的调整 */
.box:hover img {
/* 让轮胎移动并旋转 */
/* 注意执行顺序 ，属性之间空格隔开 */
transform: translateX(600px) rotate(360deg);
}
</style>
</head>
<body>
<div class="box"><img src="../images/image.png" alt=""></div>
</body>
1.3 3D变换
1.3.1 3D变化之左手法则以及旋转rotateXYZ
【1】三维坐标系
【2】旋转
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 230px;
/* 添加过渡效果 */
transition: all 0.5s;
}
.catx:hover {
transform: rotateX(180deg);
}
.caty:hover {
transform: rotateY(180deg);
}
.catz:hover {
transform: rotateZ(180deg);
}
</style>
</head>
<body>
<img src="../images/cat1.jpg" alt="" class="catx">
<br>
<img src="../images/cat7.jpg" alt="" class="caty">
<br>
<img src="../images/cat11.jpeg" alt="" class="catz">
</body>1.3.2 3D变化之透视perspective以及旋转方向
【1】场景
【2】语法
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
display: block;
margin: 0 auto;
width: 230px;
/* 添加过渡效果 */
transition: all 0.5s;
/* 给父亲添加透视效果 */
/* perspective: 500px; */
}
/* 给子元素添加透视，但一定写在最前面 */
.catx {
transform: perspective(500px) rotateX(50deg);
}
.caty:hover {
transform: perspective(400px) rotateY(180deg);
}
.catz {
transform: rotateZ(30deg);
}
</style>
</head>
<body>
<img src="../images/cat1.jpg" alt="" class="catx">
<br>
<img src="../images/cat7.jpg" alt="" class="caty">
<br>
<img src="../images/cat11.jpeg" alt="" class="catz">
</body>1.3.3 3D变化之两面翻转的盒子效果
1.盒子旋转的角度
2.定位
3.谁转到后面，给谁添加backface-visibility:hidden
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 添加相对定位 */
position: relative;
width: 300px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* 想要添加立体效果，就用透视 */
perspective: 1000px;
}
.box>div {
/* 开始给两个盒子加相对定位 */
/* 不要忘了子绝父相 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
text-align: center;
line-height: 450px;
font-size: 30px;
color: #fff;
transition: all .7s;
/* 转到背面时，要隐藏起来 */
backface-visibility: hidden;
}
.box .front {
/* 前面的盒子要盖在后面的盒子上面 */
z-index: 1;
}
.box .back {
background-color: skyblue;
/* 旋转角度 */
transform: rotateY(180deg);
}
/* 鼠标经过的效果 */
/* 经过盒子时的里面的front */
.box:hover .front {
transform: rotateY(-180deg);
}
/* 经过盒子时的里面的back，转回到前面 */
.box:hover .back {
transform: rotateY(0deg);
}
</style>
</head>
<body>
<!-- 一个大盒子 -->
<div class="box">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>