本文內容概覽:
- transition:過渡
- transform
- 2D變形
- translate(x,y):移動
- scale(x,y):縮放
- rotate(deg):旋轉
- transform-origin:調整元素轉換變形的 原點
- skew(deg,deg):傾斜
- 3D變形
- rotateX()
- rotateY()
- rotateZ()
- 透視(perspective)
- translateX(x)
- translateY(y)
- translateZ(z)
- translate3d(x, y, z)
- backface-visibility
- 2D變形
- animation:動畫
過渡(CSS3)transition
- 在CSS3中使用 transition 可以實現補間動畫(過渡效果);並且當前元素只要有“屬性”發生變化時都會存在兩種狀態。
- 比如:將寬度爲 width=100px,高度爲height=50px 的盒子 變爲 width = 200px的盒子時;由於刷新頁面時,變化的過於突兀,因此便可用transition實現過渡效果;
transition語法格式
transition:要過渡的屬性 花費時間 運動曲線 何時開始; /* 如果有多組屬性變化時,還是用逗號隔開;一般只需要前面兩個屬性即可 */ /* 以上示例代碼如下 */ transition: width 0.5s; /* 如果高度也發生變化時 */ transition: width 0.5s, height 0.5s;
transition屬性值:
transform:實現2D|3D效果
2D變形(CSS3)transform
定位的盒子居中對齊的完美寫法
- 優於之前寫的 絕對定位水平垂直居中 讓盒子水平垂直居中的寫法;
- transform:translate(水平 50%,垂直 50%)以百分比(%)爲單位時;
/* translate:移動距離,如果是 %,則以自身寬度爲準 */ transform: translate(50%,50%); position: absolute; left:50%; top:50%; /* 需要計算,並不適用 */ /* margin-left: 盒子寬度的一半 px; */ /* margin-top: 盒子高度的一半 px */ transform: translate(-50%,-50%);
設置變形中心點
transform-origin:可以調整元素轉換變形的原點;
/* 改變元素的原點,可以是盒子的任意位置;left top是以左上角爲原點;*/ transform-origin: left top; /* 如果是四個角可以用left、top、right、bottom,但是想要精確的位置,可以用 px 像素 */ transform-origin: 10px 20px; /* rotate():單位是 deg 度數 */ transform: rotate(45deg);
3D變形(CSS3)transform
左手法則:分別以X(rotateX)、Y(rotateY)、Z(rotateZ)軸爲中心進行旋轉
/* 以 X 軸 爲中心旋轉*/ transform: rotateX(); /* 以 Y 軸 爲中心旋轉*/ transform: rotateY(); /* 以 Z 軸 爲中心旋轉*/ transform: rotateZ();
透視
- 透視距離原理:近大遠小
- perspective:視距,表示視點距離屏幕的長短;視點,用於模擬人眼的位置
- perspective 一般作爲一個屬性,設置給父元素,作用於所有3D轉換的子元素
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { /* 視距:perspective; 視距越大,效果越不明顯; 視距越小,效果越明顯; */ perspective: 300px; } img { margin: 100px; width: 200px; /* 過渡 */ transition: all 5s; /* 設置變形中心點 */ transform-origin: left; } img:hover { /* 設置3D變形 */ transform: rotateY(80deg); } </style> </head> <body> <img src="../../../assets/images/yangzi.jpeg"> </body> </html>
頁面效果如下:
綜合寫法:
/* x,y 軸的單位可以是 px 也可以是 % 但是 z 軸只能是 px */ transform: translate3d(x, y, z);
動畫
- 可以通過設置多個節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果;
- 語法格式如下:
/*animation: 動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向 動畫之外的狀態; */ animation: name duration timing-function delay iteration-count direction fill-mode;
- 動畫屬性
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 200px; /* purpleYang:動畫名稱 3s: 動畫時間 2:循環次數,默認是1次 infinite:無限循環(循環次數) alternate: 反方向開始 一般情況下,默認只寫 動畫名稱 和 動畫時間 即可; */ animation: purpleYang 3s 0s infinite alternate; } /* @keyframes: 規定動畫 purpleYang:引用選擇器中設置的 動畫名稱 from{} to{}:起始位置 --> 結束位置 from--to 也可以用百分比代替:0%(相當於起始位置);100%(相當於結束位置) 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(600px, 0 ,0); } 50% { transform: translate3d(600px, 400px ,0); } 75% { transform: translate3d(0, 400px ,0); } 100% { transform: translate3d(0, 0 ,0); } */ @keyframes purpleYang { from { transform: translateX(0); } to { transform: translateX(600px); } } </style> </head> <body> <img src="../../../assets/images/yangzi.jpeg"> </body> </html>
頁面效果:圖片在水平方向從0px 到 600px 來回滑動;