1.過渡transition
1)說明：
作用在進行變化的元素上，有四個屬性值：property(目标屬性),duration(過渡時長), curve(運動曲線),delay(開始時間)
建立一個空div，為它設定樣式：
div{
width:100px;
height:100px;
background-color:lightblue;
margin:200px auto;
/*transition: width 1s, height 1s linear;*/
transition:all 1s linear;
}
div:hover{
width:300px;
height:300px;
}
2.2D變形
(1)常用屬性：
a)移動
translate(x,y) ,translateX(x),translateY(y)，需要注意,translateX(x)和translateY(y)不能同時設定，要想同時設定水準和垂直方向移動的值則使用translate(x,y)
b)縮放
scale(倍數) | scaleX(倍數) | scaleY(倍數)
c)旋轉
rotate(deg) 正值為順時針旋轉，負值為逆時針旋轉
d)調整原點
transform-origin:x,y 預設是以自身左上角為原點進行變換的，通過這個屬性可以改變原點位置
e)傾斜
skew(deg,deg) 設定兩個方向的傾斜角度
建立一個空div，為其設定樣式：
div{
width:100px;
height:100px;
background-color:lightblue;
margin:200px auto;
/*過渡*/
transition:all 3s linear;
/*調整原點*/
transform-origin:200px 200px;
}
div:hover{
/*移動，縮放，旋轉，傾斜*/
transform:translate(200px,200px) scale(2) rotate(30deg) skew(20deg,20deg);
}
在浏覽器的顯示效果為：
(2)總結
通常過渡(translate)與變形(transform)一同搭配:hover等僞元素進行呢使用的，過渡主要用于控制變形需要的時長，變形用于設定變化的效果，僞元素用于觸發。
3.3D變形(transform)
1)CSS3D坐标系
2)透視(Perspective)
a)透視的作用：
電腦顯示屏是一個2D平面，圖像之是以具有立體感（3D效果），其實隻是一種視覺呈現，通過透視可以實作此目的。透視可以将一個2D平面，在轉換的過程當中，呈現3D效果。
b)透視原理
近大遠小的視覺感覺。
c)使用
perspective的值即為視距，表示的是視點距離螢幕的距離。一般将此屬性設定給父元素，作用于所有進行3D轉換的子元素，使變形具有立體感。
3)屬性
與2D相似，相比增加了Z軸
| ranslate(x,y) | 定義 2D 轉換。 |
|---|---|
| translate3d(x,y,z) | 定義 3D 轉換。 |
| translateX(x) | 定義轉換，隻是用 X 軸的值。 |
| translateY(y) | 定義轉換，隻是用 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉換，隻是用 Z 軸的值。 |
| scale(x,y) | 定義 2D 縮放轉換。 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| scaleX(x) | 通過設定 X 軸的值來定義縮放轉換。 |
| scaleY(y) | 通過設定 Y 軸的值來定義縮放轉換。 |
| scaleZ(z) | 通過設定 Z 軸的值來定義 3D 縮放轉換。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿着 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿着 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿着 Z 軸的 3D 旋轉。 |
| skew(x-angle,y-angle) | 定義沿着 X 和 Y 軸的 2D 傾斜轉換。 |
| skewX(angle) | 定義沿着 X 軸的 2D 傾斜轉換。 |
| skewY(angle) | 定義沿着 Y 軸的 2D 傾斜轉換。 |
| perspective(n) | 為 3D 轉換元素定義透視視圖。 |
4)其他屬性
a) 3D呈現 transform-style：3d
給父盒子添加，讓子盒子存在真3d效果
指定子元素定位在3d空間中
flat：預設值，扁平化
b) backface-visibility：hidden；設定元素背面是否可見
5)綜合3D變形屬性實作圖示翻轉
html<div>
<img src="rhino.jpg" alt="">
<img src="ninja.jpg" alt="">
</div>
設定3D樣式：
body{
/*設定透視*/
perspective: 500px;
}
div{
width:300px;
height:300px;
position:relative;
margin: 100px auto;
background-color: #ccc;
}
div img{
width:100%;
height:300px;
position:absolute;
left:0px;
top:0px;
/*設定過渡*/
transition: all 5s;
}
div img:first-child{
z-index:1;
/*設定背向螢幕是否可見*/
backface-visibility: hidden;
}
div:hover img{
/*設定翻轉*/
transform: rotateY(180deg);
}
在浏覽器中顯示的效果為：
4.動畫animation
1)用法：
配合translate(移動)和transform(變形)通過設定多個節點位置，來進行移動路線的控制。
2)使用：
自定義動畫@keyframes name{設定多個節點}
animation:name(自定義的動畫名) time(動畫時長) curve(運動曲線) start(開始時間) frequency(運動次數，可設定為infinite) alternative(完成一次運動後是否反方向運動)
建立兩個空div,為其加入CSS樣式：
div{
width:100px;
height:100px;
background-color: lightblue;
border-radius:50%;
animation:walk 5s infinite alternate;
}
@keyframes walk{
0% {transform: translate3d(0,0,0);}
25%{transform: translate3d(400px,0,0);}
50%{transform: translate3d(400px,200px,0);}
75%{transform: translate3d(0,200px,0);}
100%{transform: translate3d(0,0,0);}
}
在浏覽器中的顯示效果為：
小球按照設定的路線進行運動，并且在完整的運動一次以後反方向進行運動，無限次的反複循環。