CSS3旋轉及動畫

一、css3轉換

1、元素的2d轉換

1

transform:none;/*不進行轉換*/
2transform:translate(x,y);/*定義2dd轉換，移動*/
3transform:translate3d(x,y,z);/*定義3d轉換*/
4transform:tranlatex(value);/*使用x軸的值轉換*/
5transform:tranlatey(value);/*使用y軸的值轉換*/
6transform:scale(value);/*2d縮放*/
7transform:scale3d(value1,value2,value3);/*3d縮放*/
8transform:skew(x-angle,y-angle);/*沿著 x 和 y 軸的 2d 傾斜轉換*/
9transform:rotate(angle);/* 2d 旋轉，在引數中規定角度*/
10transform:rotatex(angle); /*沿著 x 軸的 3d 旋轉*/
11transform:rotatey(angle); /*沿著 y 軸的 3d 旋轉*/
12 transform:rotatez(angle); /*沿著 z 軸的 3d 旋轉*/

2、元素的過渡效果

（1）transition-property 指定css屬性的name，transition效果

（2）transition-duration 需要指定多少秒或毫秒才能完成

（3）transition-timing-function 轉速曲線

其值有：linear（勻速）、ease（先慢後快）、ease-in（以慢速開始）、ease-out（以慢速結束）、ease-in-out（以慢速開始和結束）

（4）transition-delay 定義transition效果開始的時候

3、案例：（翻轉導航欄）

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style 
type
="text/css"
>
7ul>li
18ul>li:hover
24.box1,.box2
29.box1
33.box2
37style
>
38head
>
39<
body
>
40<
ul>
41<
li>
42<
div 
class
="box1"
>1
div>
43<
div 
class
="box2"
>首頁
div>
44li
>
45<
li>
46<
div 
class
="box1"
>2
div>
47<
div 
class
="box2"
>首頁
div>
48li
>
49<
li>
50<
div 
class
="box1"
>3
div>
51<
div 
class
="box2"
>首頁
div>
52li
>
53<
li>
54<
div 
class
="box1"
>4
div>
55<
div 
class
="box2"
>首頁
div>
56li
>
57<
li>
58<
div 
class
="box1"
>5
div>
59<
div 
class
="box2"
>首頁
div>
60li
>
6162
ul>
63body
>
64html
>

二、動畫

1、

1

@keyframes animationname
3to{}
4 }

2、屬性

animation 所有動畫屬性的簡寫屬性

1

animation-name;/*指定要繫結到選擇器的關鍵幀的名稱*/
2animation-duration;/*設定動畫將如何完成乙個週期*/
3animation-delay/*設定動畫在啟動前的延遲間隔*/45
67時），要應用到元素的樣式*/
8 animation-play-state/*指定動畫是否正在執行或已暫停*/

3、案例：（相簿）

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style 
type
="text/css"
>
7body
10.box
19.box:hover
22.box1
32@keyframes rotate
36to39}
40.box>.box1:nth-child(1)
43.box>.box1:nth-child(2)
46.box>.box1:nth-child(3)
49.box>.box1:nth-child(4)
52.box>.box1:nth-child(5)
55.box>.box1:nth-child(6)
5859
style
>
60head
>
61<
body
>
62<
div 
class
="box"
>
63<
div 
class
="box1"
>
div>
64<
div 
class
="box1"
>
div>
65<
div 
class
="box1"
>
div>
66<
div 
class
="box1"
>
div>
67<
div 
class
="box1"
>
div>
68<
div 
class
="box1"
>
div>
69div
>
70body
>
71html
>

css3動畫方塊旋轉

html translate x,y 基於原來的位置，沿x軸平移，長度為x，沿2軸平移，長度為ytransform translate x,y translatex x 基於原來的位置，沿x軸平移，長度為xtransform translatex x translatey y 基於原來的位置,沿y軸...

CSS3動畫 3D旋轉

學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...

CSS3旋轉和動畫例子

1.css3旋轉的例子 2.css3動畫 部分最關鍵的就是 webkit transition all 0.5s ease in 目前而言，transition僅webkit核心的瀏覽器支援，所以此效果僅在chrome或是safari下有。transiton屬性有這幾個值 transition pr...