下面介紹的開源項目，是CSS在動畫/3D變換方面的一些應用，非常酷的效果，全部由CSS3來實現。

在這里JavaScript僅作為動畫控制來使用，JS并不控制UI界面的具體呈現，切換動畫、3D效果僅需要一條　addClass/removeClass即可。這在一定程度上體現了Web平臺純天然的MVC結構。

即：HTML(template) + CSS(view) + JavaScript(controller) + JSON(model)

這個實例同時也簡單的說明了一點：在JS端實現的mvc可能有些過度設計，即不有利于SEO(搜索引擎優化)，也不利于頁面的性能的提升，看上去似乎有點偏離Web平臺簡單的本質，不過也許他們更適合服務器端來使用。

CSS3 3D旋轉及動畫實例

這個項目演示了使用CSS3 實現3D變換，旋轉，動畫效果，一個很好的PPT模板。

CSS3 3D旋轉及動畫實例

CSS3實現的加載頁面動畫效果，附上一段示例代碼：

CSS

.spinner {

margin: 100px auto;

width: 50px;

height: 30px;

text-align: center;

font-size: 10px;

}

.spinner > div {

background-color: #333;

height: 100%;

width: 6px;

display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}

.spinner .rect2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.spinner .rect3 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.spinner .rect4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.spinner .rect5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

}? 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

}

HTML

效果

附錄：方法名描述

matrix3d

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義3D變換矩陣(應用4X4的數列)

translate3d(x,y,z)定義3D坐標變換

translateX(x)定義3D坐標變換, 只在X軸做變換

translateY(y)定義3D坐標變換, 只在Y軸做變換

translateZ(z)定義3D坐標變換, 只在Z軸做變換

scale3d(x,y,z)定義3D拉伸變換

scaleX(x)定義3D拉伸變換, 只在X軸做變換

scaleY(y)定義3D拉伸變換, 只在Y軸做變換

scaleZ(z)定義3D拉伸變換, 只在Z軸做變換

rotate3d(x,y,z,angle)定義3D旋轉變換

rotateX(angle)定義3D旋轉變換，以X軸為旋轉軸

rotateY(angle)定義3D旋轉變換，以Y軸為旋轉軸

rotateZ(angle)定義3D旋轉變換，以Z軸為旋轉軸

perspective(n)為一個3D變換后的元素定義一個視圖

屬性描述CSS

動畫四個屬性的簡寫形式，(類似backgroud)3

指定動畫延時多久開始. 默認是 03

總結

以上是生活随笔為你收集整理的html 3d转换动画,开源项目：CSS 3D转换和动画学习示例教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。