1. 变换transform
通过 CSS3 transform转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸.
1.1 translate(tx,ty，tz) :将元素从原来的位置移动到指定位置
tx 表示向x轴移动的向量
ty 表示向y轴移动的向量
tz 表示向z轴移动的向量
1.2 2d缩放 scale(sx,sy，sz) :将元素根据中心原点进行缩放，
transform: scale3d(2,0.5,1);
sx x轴缩放的向量
sy y轴缩放的向量
sz z轴缩放的向量
1.3 rotate3d(x,y,z,a)：指定需要进行旋转的坐标轴
a 表示旋转角度
子元素将保留其 3D 位置—立体方式。
transform-style: preserve-3d;
1.4 2d斜切skew(sx,sy，) 能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
1.5 transform-origin: 允许你改变被转换元素的位置。默认是左上角。
2. 动画 animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.
2.1.必要元素：
a、通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
2.2 animation样式属性
a 动画的序列名称 animation-name：move
b 动画的持续 animation-duration : 1s
c 动画的延时:animation-delay: 1s;
d 播放状态:animation-play-state: paused|running;
e 播放速度:animation-timing-function: linear;
f 播放次数 反复:animation-iteration-count: 1;
g 动画播放完结后的状态:animation-fill-mode: forwards;
h 循环播放时，交叉动画:animation-direction: alternate;
3 过渡transition
通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上，2.规定效果的时长
3.1语法
transition: property duration timing-function delay;
3.1.1语法说明
transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function |transition-delay
3.1.1.2补充说明tansition-timing-function: 属性规定过渡效果的速度曲线
扫描二维码关注公众号，回复：
3887146 查看本文章
案例
1.手风琴案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(69, 218, 114);
}
.menu {
width: 200px;
height: auto;
margin: 100px auto;
}
.item>h3 {
height: 40px;
line-height: 40px;
padding-left: 10px;
background-color: rgb(28, 202, 202);
color: rgb(64, 94, 15);
border-bottom: 2px solid #ccc;
}
.itemBox {
width: 100%;
height: 0;
overflow: hidden;
transition-property: height;
transition-duration: 2s;
}
.itemBox>ul {
background-color: rgb(125, 96, 230);
list-style: none;
padding-left: 10px;
}
.item:hover>.itemBox {
height: 83px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>省内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>国内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>国际新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
</div>
</body>
</html>
最终效果
2.正方体案例
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(123, 233, 233);
}
.box {
width: 200px;
height: 200px;
margin: 200px auto;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 1, 60deg);
transition: transform 2s;
animation-name: move;
perspective-origin: 0px 0px;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes move {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
.box>div {
width: 200px;
height: 200px;
position: absolute;
}
div>img {
width: 200px;
height: 200px;
}
.font {
transform: translateZ(100px);
background-color: rgb(200, 0, 0);
}
.back {
background-color: rgb(0, 200, 0);
transform: translateZ(-100px) rotateY(180deg);
}
.left {
background-color: rgb(0, 0, 200);
transform: translate(100px) rotateY(-90deg);
}
.ringht {
background-color: rgb(200, 200, 0);
transform: translate(-100px) rotateY(90deg);
}
.top {
background-color: rgb(0, 200, 200);
transform: translateY(-100px) rotateX(90deg);
}
.button {
background-color: rgb(200, 0, 200);
transform: translateY(100px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="font"><img src="border1.png" alt=""></div>
<div class="back"><img src="border1.png" alt=""></div>
<div class="left"><img src="border1.png" alt=""></div>
<div class="ringht"><img src="border1.png" alt=""></div>
<div class="top"><img src="border1.png" alt=""></div>
<div class="button"><img src="border1.png" alt=""></div>
</div>
</body>
</html>
最终效果
