旋轉 rotate
旋轉xyz軸 正順時針負逆時針，單值預設z，3d（1，1，1，25deg）三面合力各做25deg形成的向量力。
平移 translate
沒有脫離文件流，百分比相對於自身的寬高，旋轉平移先後區別，會有不同的效果。
縮放 scale
縮放單值預設同時應用xy軸，z軸是厚度，3d是集合顯示。
扭曲 skew
扭曲單值預設只應用x軸。
轉換中心點
transform-origin：改變中心點，上下左右，百分比，象素 。
過渡 transition
復合的，元素屬性，時間，速度，延遲，多個屬性用逗號分隔。
漸變也是效能殺手
練習：
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
position: absolute;
left:50%
; top:50%
; transform:
translate(-
50%,-
50%);
}.table
.pin
@keyframes move
100%
}.active
<
/style>
<
/head>
=>
="table"
>
<
/div>
="pin"
>
<
/div>
<
/div>
"btn"
>but<
/button>
var otable = document.
getelementsbyclassname
('table')[
0];var opin = document.
getelementsbyclassname
('pin')[
0];var flag =
true
; btn.
onclick
=function()
else
}<
/script>
<
/body>
<
/html>
```
CSS3入門之轉換
css3入門之轉換 body body first child body last child p,blockquote,ul,ol,dl,table,pre h1,h2,h3,h4,h5,h6 h1 tt,h1 code,h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 c...
有關於css3的2d轉換
css3中的2d轉換在transform中寫的東西是存在順序關係的，比方說要把幾張豎起來排成蜂窩狀，就得先將旋轉需要的角度，然後再在z軸上移動，否則反過來的話，就會變成整體先移動，然後再乙個旋轉需要的角度。比方說下面所展示的部分的 img nth child 1 img nth child 2 im...
CSS3的過渡 動畫 轉換
特別說明 以下屬性目前都需要加上各瀏覽器廠商字首,瀏覽器 廠商字首 瀏覽器核心 chrome safari webkit blink webkit opera o blink firefox moz gecko ie ms trident 1 過渡 transition property 指定應用過...