常用動畫屬性——transition（過渡）
常用動畫屬性——animation（動畫）
常用動畫屬性——transform（變換）
transform: none|transform-functions;值
描述none
定義不進行轉換。
matrix(n,n,n,n,n,n)
定義 2d 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
定義 3d 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)
定義 2d 轉換。
translate3d(x,y,z)
定義 3d 轉換。
translatex(x)
定義轉換，只是用 x 軸的值。
translatey(y)
定義轉換，只是用 y 軸的值。
translatez(z)
定義 3d 轉換，只是用 z 軸的值。
scale(x,y)
定義 2d 縮放轉換。
scale3d(x,y,z)
定義 3d 縮放轉換。
scalex(x)
通過設定 x 軸的值來定義縮放轉換。
scaley(y)
通過設定 y 軸的值來定義縮放轉換。
scalez(z)
通過設定 z 軸的值來定義 3d 縮放轉換。
rotate(angle)
定義 2d 旋轉，在引數中規定角度。
rotate3d(x,y,z,angle)
定義 3d 旋轉。
rotatex(angle)
定義沿著 x 軸的 3d 旋轉。
rotatey(angle)
定義沿著 y 軸的 3d 旋轉。
rotatez(angle)
定義沿著 z 軸的 3d 旋轉。
skew(x-angle,y-angle)
定義沿著 x 和 y 軸的 2d 傾斜轉換。
ewx(angle)
定義沿著 x 軸的 2d 傾斜轉換。
skewy(angle)
定義沿著 y 軸的 2d 傾斜轉換。
perspective(n)
為 3d 轉換元素定義透視檢視。
**牆技巧一、animation-delay：定義動畫何時開始。預設為0，立即執行動畫；正值，延遲指定時間後，開始執行動畫；負值，立即執行，但跳過指定時間後進入動畫。
技巧二、
妙用border顏色，border-left-color
技巧三、巧用border寬度
設定書本右上邊的拆角
類名:hover:befor
正圓（把x變為百分之幾百，以具體確定，然後進行旋轉執行）
transform-origin 屬性允許您改變被轉換元素的位置。
2d 轉換元素能夠改變元素 x 和 y 軸。3d 轉換元素還能改變其 z 軸。
橢圓
實現弧形運動
hover
1hover.htmldoctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>css3 hover
title
>
6<
style
type
="text/css"
>
7.demo,.img,.border,.mask
11.demo
16.img
22.border
35.mask
44.demo:hover .mask
48.demo:hover .border
53.info
6162
style
>
6364
head
>
65<
body
>
66<
a href
="#"
class
="demo"
>
67<
div
class
="img"
style
="background-image:url("
>
div>
68<
div
class
="mask"
>
69<
div
class
="info"
>
70<
h3>beatiful day
h3>
71<
p>description goes here
p>
72div
>
73div
>
74<
div
class
="border"
>
div>75a
>
76body
>
77html
>
用CSS實現動畫
過渡動畫 transition 這個例子較為直接的介紹了過渡 transition 形成的動畫，所謂過渡動畫，就是元素由一種央視逐漸轉變為另一種樣式的效果，在第一個動畫中就是hover前後兩種樣式 在第二個動畫中就是從樣式 tran1 過渡到 tran1 tran2 注 1 transition與t...
CSS實用技巧
做豆瓣的時候模仿豆瓣的正在熱映的列表做的一個樣式，效果及 如下 item lists item 最主要的就是要在在父元素設定white space nowrap 來保證子元素強制不換行 之前我們寫這樣的了能就是為子元素設定width 100 height 100 其實也可以使用如下的寫法 paren...
CSS實用技巧
做豆瓣的時候模仿豆瓣的正在熱映的列表做的一個樣式，效果及 如下 item lists item 最主要的就是要在在父元素設定white space nowrap 來保證子元素強制不換行 之前我們寫這樣的了能就是為子元素設定width 100 height 100 其實也可以使用如下的寫法 paren...