css3相關筆記（三）

1.每乙個方向上的邊框形狀並不是矩形的，其實是三角形或梯形的，配合圓角邊框可以製作美麗花瓣。

2.css3 3d變換效果 transform

◆transform:rotatex(360deg);表示在x軸3d旋轉360度。

◆transform:rotatey(360deg);表示在y軸3d旋轉360度。

◆transform:rotatez(360deg);表示在z軸3d旋轉360度。

◆transform:translatex(300px);表示在x軸3d位移300px。

◆transform:translatey(300px);表示在y軸3d位移300px。

◆transform:translatez(300px);表示在z軸3d位移300px。

★3d效果一般配合透視效果來使用更加明顯，一般是給父容器新增透視。

2.css3 透視效果 （調整焦距）

◆perspective:1000px;值越大焦距越遠，值越小焦距越近，值越小效果越明顯，就會感覺和你的距離更加的近，透視效果僅僅只是視覺上的呈現。

3.css3 反面可見性 

◆backface-visibility:hidden;表示背面可見性為隱藏，一般配合3d翻轉來使用，乙個盒子只有正面可見，一翻轉到背面之後就不可見了。

4.偽元素中的content屬性可以賦值為標籤的自定義屬性【

//設定偽元素

span::before

//頁面標籤

】。5.css3 真正的3d效果 transform-style:preserve-3d;當這個屬性加給父盒子時，可以讓子盒子呈現3d效果，這個屬性預設值為flat，子盒子呈現2d效果（扁平化）。

6.css3 動畫 animation

◆js中的animate函式呼叫，是先定義乙個animate函式然後再呼叫animate();

◆css3中的動畫，也是先定義然後再呼叫。

◆css3定義動畫:【

@keyframes 動畫名to}

】◆css3執行動畫：【

animation: 動畫名  一次動畫持續時間  執行次數（infinite:無限次）  是否反向（alternate）  運動曲線（linear） 延遲時間;

】◆css3動畫定義與執行【

/*定義乙個移動的動畫*/

@keyframes move

to{transform:translatey(500px);

css3相關筆記（三）

1.每乙個方向上的邊框形狀並不是矩形的，其實是三角形或梯形的，配合圓角邊框可以製作美麗花瓣。2.css3 3d變換效果 transform transform rotatex 360deg 表示在x軸3d旋轉360度。transform rotatey 360deg 表示在y軸3d旋轉360度。tr...

css3相關筆記（四）

1.css3新增的伸縮布局，主軸方向是從左到右，側軸方向是從上到下 display flex 預設從左到右，從上到下 設定主軸排列方向的方式 flex direction row 預設屬性，表示從左至右的排列 flex direction row reverse 表示從右至左的排列 flex dir...

CSS3相關效果整理

1.過長省略 white space nowrap 為應用text overflow做準備，禁止換行 overflow hidden 為應用text overflow做準備，禁止文字溢位顯示 text overflow ellipsis 相容ie，safari webkit o text overf...