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: 屬性規定過渡效果的速度曲線
案例
1.手風琴案例
<!DOCTYPE html>
<html >
<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 >
<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>
最終效果