CSS3中的2D轉換及動畫效果
阿新 • • 發佈：2019-01-31
CSS中的2D變形主要用transform屬性來實現，其可以用來控制元素的變形，如移動，比例化，反過來，旋轉，和拉伸。
transform屬性的基本語法如下
1.translate（）
移動元素，即基於X和Y 座標重新定義元素位置。
用法如下：
transform:translate(300px,200px)；
或
transform:translateX(300px)；
transform:translateY(300px)；2.rotate（）
旋轉元素，其後括號內寫旋轉的角度，正值為順時針旋轉，負值為逆時針旋轉。
eg.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 100px;
width: 100px;
margin:30px 30px;
background: red;
transform: rotate(50deg);
} 
3.scale（）
縮放元素。其後括號內寫要放大或縮小的倍數，0-1之間的數表示縮小，大於1表示放大。
具體用法：
transform: scale(.5);
（表示元素尺寸寬和高等比例縮小為原來的0.5）
transform: scale(2,4);
（表示元素的寬，即水平放大2倍，高，即垂直放大四倍）4.skew（）
傾斜扭曲元素。其後括號裡寫傾斜的度數。同樣，正值表示順時針，負值表示逆時針。
eg.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 100px;
width: 100px;
margin:50px 50px;
background: red;
transform: skew(30deg);
}
</style>
</head>
<body>
<div>
<p>CSS的2D轉換</p>
</div>
</body>
</html>
- 在此補充2D轉換中除transform外其他兩個常用，並且經常組合起來使用的屬性
1.transform-origin用來定義旋轉中心點
transform-origin: right bottom;
transform: rotate(30deg);
transform-origin後的定位值也可用百分比或精確畫素2.transition過渡。常用來控制css中2D和3D的動畫效果轉換的過渡時間。
其語法為
transition：規定應用過渡的CSS屬性的名稱
定義過渡效果花費的時間 預設0
規定過渡效果的時間曲線。預設是 "ease"
規定過渡效果何時開始。預設是 0- 自定義動畫
自定義動畫分為定義和引用兩個部分。定義的方式是用@keyframes
@keyframes myfirst
{
from {background: blue;}
to {background: red;}
}
myfirst是自定義動畫的名稱，可以根據自己的需要來取用。
引用自定義動畫是用animation屬性，把自定義動畫繫結到一個選擇器中，具體用法如下
animation：名稱/動畫播放時間/速度曲線/延遲時間/播放次數/下一週期是否逆向/執行或暫停常用值：
速度曲線：linear —— 開始到結束速度是相同的
ease —— 慢-快-慢
ease-in —— 開始緩慢
ease-out —— 結束緩慢
ease-in-out ——開始和結束都慢
播放次數：預設一次
infinite —— 迴圈播放
下一週期是否逆向：預設normal，表示正常播放不逆向
alternate —— 逆向播放