前端2D變換

2d轉換是使元素改變形狀、尺寸和位置的一種效果

2d轉換包括

translate（位移）rotate（旋轉）scale（縮放）skew（傾斜）

translate（位移）

//平移： translate(水平位移， 垂直位移)

//eg:讓div水平居中
<
!doctype html>
"en"
>
"utf-8"
/>
"viewport" content=
"width=device-width, initial-scale=1.0"
/>
"x-ua-compatible" content=
"ie=edge"
/>
document<
/title>
div 
<
/style>
<
/head>
<
/div>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
/>
"viewport" content=
"width=device-width, initial-scale=1.0"
/>
"x-ua-compatible" content=
"ie=edge"
/>
document<
/title>
div 
div:hover 
<
/style>
<
/head>
a<
/div>
<
/body>
<
/html>

//縮放： scale(x, y)

//x: 水平縮放比例
//y: 垂直縮放比例
//如果只有乙個值： 等比例縮放

<

!doctype html>
"en"
>
"utf-8"
/>
"viewport" content=
"width=device-width, initial-scale=1.0"
/>
"x-ua-compatible" content=
"ie=edge"
/>
document<
/title>
div 
div:hover 
<
/style>
<
/head>
a<
/div>
<
/body>
<
/html>

//skewx();

//skewy();
<
!doctype html>
"en"
>
"utf-8"
/>
"viewport" content=
"width=device-width, initial-scale=1.0"
/>
"x-ua-compatible" content=
"ie=edge"
/>
document<
/title>
div 
div:hover 
<
/style>
<
/head>
angel<
/div>
<
/body>
<
/html>

過渡與2D變換

transition 屬性是乙個簡寫屬性，用於設定四個過渡屬性 transition property 規定設定過渡效果的 css 屬性的名稱 all attr none transition duration 運動時間 transition delay 延遲時間 transition timing...

元素的2D變換

雖然2d3d變形用的不是很多，但今天既然學到了還是要記一下，筆記流部落格，不喜勿噴 transform 變形樣式 rotate表示旋轉變形，正值順時針，單位為deg transform origin，設定變形原點，預設為50 50 translate 平移變形，兩個引數分別是橫向偏移量和縱向偏移量 ...

CSS3屬性（過渡，2D變換，3D變換，動畫）

在css3中，我們如果不使用js 或者flash動畫，想要實現元素從a狀態變成b狀態，並且中間的過程可以被觀察到，那麼可以使用過渡屬性 transitiont ease 由快到慢 預設值 linear 勻速運動 ease in 加速運動 ease out 減速運動 ease in out 先加速後減...