css3動畫效果和3D模型

今天了解了css3的動畫漸變效果，如果我們要對頁面中的某個元素的樣式進行變化，就不用js或jquery苦苦的寫**了，直接用css3的這個transition這個屬性就ok，方便快捷，下面請看demo。

我要對某個div操作，例如：當滑鼠移入div中，改變其width、height和background，如果不使用transition屬性而直接用hover的話，會使頁面非常死板、生硬，如果使用js或jquery的話，太麻煩。transition的用法如下：

#box1

#box1:hover

transition:屬性1 時間1，屬性2 時間2....，屬性n 時間n；

由於不同瀏覽器核心不同，所以要加上相應的字首，-webkit-，-moz-,-o-。

當滑鼠移入div時，使div的background、width和height產生變化，變化的時間是2s。

過渡模式：transition有5中過渡模式：

1）：ease 緩慢開始，緩慢結束（預設模式）

2）：linear 勻速

3）：ease-in 緩慢開始

4）：ease-out：緩慢結束

5）：ease-in-out：緩慢開始，緩慢結束，與ease稍有區別

其語法是：-webkit-transition:屬性1 時間1 過渡模式1，屬性2 時間2 過渡模式2.....;

例如：-webkit-transition:width 1s ease,height 2s linear,background 3s;

要使元素獲得3d效果，需要使用perspective和transform這兩個屬性，看如下**

我們要讓block呈現3d效果的話，可以對其加上如下css樣式：

#box

#block

父元素box：

perspective屬性：3d元素（子元素block）距離檢視（父元素box）的距離，單位畫素。

perspective-origin:眼睛所在的位置，預設50%是螢幕中心。

子元素block：

transform屬性：rotatex(deg),rotatey(deg),rotatez(deg),deg是角度的意思，使元素有旋轉效果

其中x軸是水平方向，y軸是垂直方向，z是沿著螢幕朝外的方向。

關於transform這個屬性，根據其值的不同可以產生不同的3d效果，rotate可以產生旋轉的效果，translate可以產生移動的效果，例如

-webkit-transform:translatex(300px) translatey(300px) translatiez(300px)

會沿著3個不同的方向移動，請大家注意translationz這個值：還記得前面給父元素box設定的prespective：800這個屬性嗎？？z軸的方向是沿著螢幕向外，也就是說3d元素距離復元素800px，當translatez的時候，子元素沿著z軸移動，此時呈現的效果是元素會離觀察者越來越近哦，請大家細細體會！！！謝謝

css3動畫效果和3D模型

CSS3動畫 3D旋轉

css3之3d動畫呈現

CSS3實現3D立體效果

css3動畫效果和3D模型

CSS3動畫 3D旋轉

css3之3d動畫呈現

CSS3實現3D立體效果

相關推薦