CSS動畫之轉換模組

2d轉換模組：注意點：1.可以類似於過渡模組一樣簡寫，但是這裡不是用逗號隔開而是用空格

2.2d的轉換模組會修改元素的座標系，所以旋轉之後的平移就不是水平平移
格式：旋**transform: rotate(30deg)旋轉角度
平移：transform: translate(50px,100px);平移的座標系
縮放：transform: scale(2,4);縮放的倍數
翻**transform: skew(30deg,20deg);沿x軸y軸旋轉的角度
矩陣：transform:matrix(0.866,0.5,-0.5,0.866,0,0);使用六個值的矩陣。達到以上所有功能
綜合：transform: rotate(30deg) translate(50px,10px) scale(2,4) skew(30deg,30deg);用空格隔開
形變中心點：transform-origin：50% 50%  可以用百分比，畫素，特殊關鍵字，預設旋轉是通過自己的中心點做參考，可以通過修改形變中心點來改變旋轉
旋轉軸向：transform：rotatex(45deg);transform：rotatey(45deg);transform：rotatez(45deg);一般預設旋轉是垂直桌面的z軸旋轉的
透視屬性：perspective：500px  近大遠小（一般結合旋轉軸向來看，更加直觀）值是距離物體的多遠
注意點：一定要把透視屬性設定到你要觀察的元素的父元素（上級就行，設定給它爺爺也行）上面！！！！！

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>2d轉換
title
>
<
style
>*ul
li.box2
.box3
.box4
.box5
.box6
style
>
head
>
<
body
>
<
ul>
<
li class
="box1"
>正常
li>
<
li class
="box2"
>旋轉
li>
<
li class
="box3"
>平移
li>
<
li class
="box4"
>縮放
li>
<
li class
="box5"
>翻轉
li>
<
li class
="box6"
>綜合
li>
ul>
body
>
html
>

1.2d和3d的區別：2d就是沒有厚度只有寬高，3d就是除了寬高還加了厚度

預設情況下所有的元素都是2d元素
2.如何呈現3d：類似於透視，給其父元素新增transform-style：preserve-3d就行

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>3d轉換
title
>
6<
style
>7*
11.father
20.son
27style
>
28head
>
29<
body
>
30<
div 
class
="father"
>
31<
div 
class
="son"
>
div>
32div
>
33body
>
34html
>

CSS 過渡 轉換 動畫模組

1 作用 修改a標籤不同狀態的樣式 2 a 標籤的四種狀態 3 注意點 4 練習總結 1 基本使用 div 2 其他屬性 3 連寫 4 彈性效果和手風琴效果的練習 1 平移 transform translate x，y 2 旋 transform rotate 45deg 3 縮放 transfo...

CSS之 動畫模組

我們單刀直入講步驟 第一步 告訴系統要執行哪乙個動畫 animation name pingyi 動畫名稱可以任意起乙個 第二步 告訴系統我們要建立乙個名稱叫做pingyi的動畫 keyframes pingyi to 第三步 告訴系統動畫持續的時長 animation duration 3s 基礎...

初識CSS3之動畫模組

css3之動畫模組 與過度模組之間的區別 不同點過度模組必須人為觸發才會執行動畫 動畫模組不需要人為觸發就可以執行的動畫 相同點過度模組和動畫模組都是用來給元素新增動畫的 過度和動畫模組都是系統新增的屬性 過度和動畫模組都需要滿足三要素才會有動畫效果 動畫模組三要素 css3 animation n...