漸變
線性漸變
linear-gradient指沿着某條直線朝一個方向產生的漸變效果。
線性漸變的核心：
- 漸變方向
- 顏色
- 漸變範圍
/* 注意：漸變實際上相當與一張圖片，因爲需要加給background-image纔會生效 */
/* 漸變的核心：漸變方向，漸變顏色, 漸變範圍 */
/* background-image: linear-gradient( 方向, 顏色 範圍, 顏色 範圍, 顏色 範圍 ); */
/* 最簡單的漸變 */
background-image: linear-gradient(red, green);
/* 設定漸變的方向 */
background-image: linear-gradient(to right, red, green);
/* 也可以設定漸變的角度 */
background-image: linear-gradient(45deg, red, green);
/* 設定漸變的範圍 */
background-image: linear-gradient(to right, red 20%, green 80%)
/* 每一個區間表示漸變顏色的範圍 */
background-image: linear-gradient(to right, red 20%, green 20%)
徑向漸變
radial-gradient指從一箇中心點開始沿着四周產生漸變效果
徑向漸變的核心：
- 圓的大小
- 圓心的位置
- 顏色
/*1. 最簡單的漸變*/
background-image: radial-gradient(red, green);
/*2. 指定圓的半徑和圓心*/
background-image: radial-gradient(200px at center, red, green);
/*3. 指定橢圓*/
background-image: radial-gradient(200px 80px at center, red, green);
/*4. 指定範圍*/
background-image: radial-gradient(200px at center, green 50%, red 50%);
過渡
過渡的屬性
- 如果兩個狀態發生改變，沒有過渡，效果是瞬間變化的
- 如果加上了過渡，那麼這個過程就會有動畫的效果。
- 整個狀態變化的過程是由瀏覽器來完成的，我們只需要關注開始狀態與結束狀態即可。
/*transition-property：設置過渡屬性
/*也可以是width,height*/
transition-property:all;
/*transition-duration:設置過渡時間*/
transition-duration:1s;
/*transition-delay：設置過渡延時*/
transition-delay:2s;
/*transition-timing-function:設置過渡的速度*/
/*linear，ease，ease-in，ease-out，ease-in-out， steps(10)*/
transition-timing-function:linear;
屬性合寫
/* 屬性 時間 延時 速度 */
transition: width 1s 3s linear;
過渡的注意點：
- 過渡必須要有兩個狀態的變化。
- 過渡可以寫在A狀態，也可以寫在B狀態，但是如果寫在B狀態，那麼回來的時候，就沒有過渡效果了。
2D轉換
transform: 轉換，是CSS3最具顛覆性的幾個特性之一，既可以用於2D轉換，也可以用於3D轉換。
transform：2D轉換，元素在平面上實現移動、旋轉、縮放、斜切等操作
scale縮放
transform: scaleX(0.5);/*讓寬度變化*/
transform: scaleY(0.5);/*讓高度變化，注意不能寫多個transform，不然會覆蓋。*/
transform: scale(0.5);/*讓寬度和高度同時變化*/
- scale接收的值是倍數，因此沒有單位
- scale可以是一個值，如果是一個值，不是說僅僅縮放寬度，高度也會等比例的縮放。
- 可以通過transform-origin設定旋轉原點
translate平移
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%);
注意：
- translate的值可以是px，也可以是百分比，如果是百分比，那麼參照的是自身的寬高。
- translate移動的元素並不會影響其他盒子，類似於相對定位。
rotate旋轉
transform: rotate(360deg);//旋轉360度
transform: rotate(-360deg);//逆時針旋轉360度
注意：
- 單位是deg，角度，不是px
- 正值順時針轉，負值逆時針轉
- 可以通過transition-origin設定旋轉原點
skew斜切(變形)
skew在實際開發中，是用的最少的一個屬性。一般來說，x和y只會傾斜其中的一個
/*在水平方向傾斜30deg*/
transform: skewX(30deg);
/*在垂直方向傾斜30deg*/
transform: skewY(30deg);
transform-origin轉換原點
通過transform-origin可以設置轉換的中心原點。
transform-origin: center center;
transform-origin: 40px 40px;
轉換合寫問題
transform:translateX(800px) scale(1.5) rotate(360deg) ;
//1. transform屬性只能寫一個，如果寫了多個會覆蓋
//2. transform屬性可以連寫，但是順序對效果影響的，因爲它會在第一個效果的基礎上執行第二個效果，然後執行第三個效果（通常會把rotate放後面）
//3. 如果對transform進行過度效果的時候，初始狀態和結束狀態一一對應
3D轉換
transform:不僅可以2D轉換，還可以進行3D轉換。
座標軸
用X、Y、Z分別表示空間的3個維度，三條軸互相垂直。**注意+Y是向下的。
perspective透視
電腦顯示屏是一個2D的平面，因爲我們看不出來旋轉的方向，通過perspective屬性，可以定義3D 元素距視圖的距離，單位是px。
說白了，設置了perspective屬性後，就有了進大遠小的效果了，在視覺上，讓我們能看出來3d的效果。
注意：當爲元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
perspective：1000px;
關於近大遠小
對於我們眼睛來說，離我們越近的房子，我們會感覺到這個房子越大，離我們越遠的房子，就會感覺越小，其實房子的大小都是一樣的，只是在視覺上的一種不同。
rotate旋轉
transform: rotate(45deg);// 讓元素在平面2D中旋轉
transform: rotateX(45deg);// 讓元素沿着X軸轉45度
transform: rotateY(45deg);// 讓元素沿着Y軸轉45度
transform: rotateZ(45deg);// 讓元素沿着Z軸轉45度
translate平移
/*沿着X軸的正方向移動45px*/
transform: translateX(45px);
/*沿着Y軸的正方向移動45px*/
transform: translateY(45px);
/*沿着Y軸的正方向移動45px*/
transform: translateZ(45px);
transform-style
transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素。注意這個屬性只能給父元素添加。
flat:默認值，2d顯示
preserve-3d: 3d顯示
transform-style與perspective的區別
透視：透視只是相當於設置了一個距離，輔助我們查看3D效果的工具，
preserve-3d:給父盒子添加，讓子元素保留3D的位置，說白了，只有設置了preserve-3d，這個元素才能被稱之爲3d元素。
一個3d元素可以沒有perspective，但是不能沒有transform-style