CSS3除了為開(kāi)發(fā)者提供二維變形之外，還將動(dòng)畫(huà)從二維平面推動(dòng)到了三維立體狀態(tài)，能夠?qū)崿F(xiàn)真正的三維特效。
成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、鐘樓網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為鐘樓等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
三維變形和二維變形一樣，均使用的是transform屬性。想要觸發(fā)三維變形有兩種方式：一種方式是通過(guò)語(yǔ)法告知瀏覽器“請(qǐng)采用三維方式進(jìn)行變形處理”，另一種方式是直接使用CSS3三維變形的語(yǔ)法。
觸發(fā)方法1：告知瀏覽器變形方式
-webkit-transform-style:preserve-3d;
Tips：IE不支持三維變形，在移動(dòng)端，絕大多數(shù)的瀏覽器均為WebKit內(nèi)核，因此，在此句代碼之前需要書(shū)寫(xiě)-webkit-的前綴內(nèi)核。
Tips：不要為body元素設(shè)置-webkit- transform-style: preserve 3d,否則會(huì)對(duì)position:fixed定位的元素造成布局影響。在開(kāi)發(fā)當(dāng)中，如果當(dāng)前元素屬于body的子級(jí)元素，又希望應(yīng)用三維變形，則在body和當(dāng)前元素之間多嵌套一層結(jié)構(gòu)，并為這層元素應(yīng)用三維變形即可。
觸發(fā)方法2：直接使用CSS3變形語(yǔ)法
!DOCTYPE?html
head
meta?charset="UTF-8"
title言成科技/title
style
.box1?{
width:?150px;
height:?150px;
border:?2px?solid?blue;
}
.box1?div?{
height:?150px;
background:?rgba(0,?0,?0,?0.5);
-webkit-transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);
transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);
}
/style
/head
body
div?class="box1"
div/div
/div
/body
/html
具體三維變形的具體屬性詳見(jiàn)《CSS3-3D相關(guān)知識(shí)詳解—視角以及變形方向》
3D效果制作
需求
制作一個(gè)立方體，并進(jìn)行旋轉(zhuǎn)
代碼實(shí)例
!DOCTYPE?HTML
html
head
meta?charset="utf-8"?/
title言成科技/title
link?rel="stylesheet"?type="text/css"?href=""?/
style
.main-bac?{?-webkit-perspective:1500;?}?/*設(shè)定透視距離*/
.main{
width:200px;?
height:200px;?
margin:?0?auto;
position:relative;
-webkit-transform-style:preserve-3d;
-webkit-transition:-webkit-transform?2s?ease?0s;/*過(guò)渡時(shí)間*/
}
/*基本樣式*/
.main?p{
position:?absolute;?
margin:?0;?
padding:?0;?
width:?200px;?
height:?200px;??
text-align:?center;?
line-height:?200px;?
font-size:?26px;?
opacity:0.5;
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，形成第一個(gè)面（正面）*/
.main?p:nth-of-type(1)?{
background-color:red;
-webkit-transform:translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞x軸旋轉(zhuǎn)90度形成上面的面*/
.main?p:nth-of-type(2)?{
background-color:orange;?
-webkit-transform:rotateX(90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞x軸旋轉(zhuǎn)-90度形成下邊的面*/
.main?p:nth-of-type(3)?{
background-color:yellow;
-webkit-transform:rotateX(-90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)90度形成右側(cè)的面*/
.main?p:nth-of-type(4)?{
background-color:green;
-webkit-transform:rotateY(90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)-90度形成左側(cè)的面*/
.main?p:nth-of-type(5)?{
background-color:#b435bf;
-webkit-transform:rotateY(-90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)180度形成后面（背面）*/
.main?p:nth-of-type(6)?{
background-color:blue;
-webkit-transform:rotateY(180deg)?translateZ(100px);
}
/*鼠標(biāo)移入時(shí)繞Y軸旋轉(zhuǎn)180度，繞Z軸旋轉(zhuǎn)180度*/
.main:hover?{-webkit-transform:rotateY(180deg)?rotateZ(180deg);?}???
/style
/head
body
div?class="main-bac"
div?class="main"
p言成科技/p
p3D立方體/p
pHTML5學(xué)堂/p
p3D立方體/p
p碼匠/p
pJavaScript/p
/div??????????????
/div
/body
/html
代碼解析
當(dāng)鼠標(biāo)移入的時(shí)候，立方體逐漸的發(fā)生旋轉(zhuǎn)（非突變），圍繞X軸旋轉(zhuǎn)45度的同時(shí)，圍繞Y軸旋轉(zhuǎn)45度。
當(dāng)鼠標(biāo)移出立方體時(shí)，立方體恢復(fù)到初始狀態(tài)。在最開(kāi)始狀態(tài)時(shí)，并沒(méi)有采用無(wú)限遠(yuǎn)的視角，設(shè)置一定的視角，讓剛開(kāi)始時(shí)直視立方體時(shí)，不會(huì)覺(jué)得是一個(gè)平面。
3D效果制作-目標(biāo)效果圖
以上資料來(lái)源：《HTML5布局之路》
可以使用js的scrollTop 屬性來(lái)監(jiān)聽(tīng)滾動(dòng)的距離，然后修改左邊導(dǎo)航的樣式來(lái)實(shí)現(xiàn)
HTML5是HTML的升級(jí)版，HTML5有兩大特點(diǎn)：首先，強(qiáng)化了 Web 網(wǎng)頁(yè)的表現(xiàn)性能。其次，追加了本地?cái)?shù)據(jù)庫(kù)等 Web
應(yīng)用的功能。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。今天我們推薦8款使用HTML5生成的特
殊效果，希望可以對(duì)大家的使用帶來(lái)幫助!
HTML5實(shí)現(xiàn)的五子棋游戲
在線演示
這是一款使用HTML5實(shí)現(xiàn)的五子棋特效，與計(jì)算機(jī)的對(duì)局你不見(jiàn)得能次次都贏得勝利，不信可以點(diǎn)擊在線演示。
一款不需要視頻文件的視頻播放器-Frame player
在線演示
HTML5視頻是非常棒的，它可以很容易的用在多款設(shè)備上。但是它也有自己的問(wèn)題，比如移動(dòng)設(shè)備的播放器，可能有不同版本不兼容的情況。今天我們介紹這款視頻播放器完善了之前的效果，用起來(lái)更方便。希望大家喜歡!
3D菜單
在線演示
或許在現(xiàn)如今這個(gè)科技發(fā)達(dá)的時(shí)代，在線點(diǎn)餐已不是新鮮事。餐廳可以對(duì)Menu進(jìn)行設(shè)計(jì)，點(diǎn)擊菜名會(huì)相應(yīng)彈出菜品的照片，或者還可以增加卡路里，原材料和客戶們的評(píng)價(jià)等。絕對(duì)是一個(gè)超時(shí)髦的創(chuàng)意!
用HTML5的畫(huà)布實(shí)現(xiàn)撕布的動(dòng)畫(huà)效果
在線演示
用HTML5的畫(huà)布實(shí)現(xiàn)撕布的效果，滑動(dòng)鼠標(biāo)，布會(huì)隨著鼠標(biāo)變動(dòng)。點(diǎn)擊鼠標(biāo)左鍵，然后滑動(dòng)鼠標(biāo)，布就會(huì)被割開(kāi)。如果你還沒(méi)有查看過(guò)這款演示效果，那絕對(duì)逼真的讓你震撼!
HTML5 Canvas(畫(huà)布) 基礎(chǔ)使用和介紹
在線下載
還記得在過(guò)去的Web前端開(kāi)發(fā)中，如果你需要繪圖或者生成相關(guān)圖形的話，使用Flash可能是你唯一或者說(shuō)最強(qiáng)大的實(shí)現(xiàn)方式，而在近些年的技術(shù)
熱點(diǎn)HTML5標(biāo)準(zhǔn)中，HTML
Canvas(畫(huà)布)能夠更加方便的幫助你實(shí)現(xiàn)2D繪制圖形圖像及其各種動(dòng)畫(huà)效果功能。在今天的這篇技術(shù)教程中我們將介紹基本的Canvas使用，希望大
家覺(jué)得有幫助!
HTML5畫(huà)布生成的2D光源效果
在線演示
超金屬的背景，仿佛探照燈的經(jīng)過(guò)讓他看上去更加的立體。這是一款使用HTML5 Canvas生成的2D光源效果。絕對(duì)讓你不后悔使用它!
HTML5的Flappy bird實(shí)現(xiàn)
在線演示
著名的Flappy Bird，相信知道的人一定不少吧，點(diǎn)擊你的空格，不要讓它掉下來(lái)，看看你最終的成績(jī)有多好。發(fā)上來(lái)我們切磋一下吧.
Sonic - 循環(huán)加載的利器
在線演示1 在線演示2 在線演示3
Sonic是一個(gè)不到3k，非常小的JS類庫(kù)，你可以用這個(gè)類庫(kù)來(lái)創(chuàng)建自定義的加載動(dòng)畫(huà)。它的循環(huán)動(dòng)畫(huà)效果非常贊，比如你可以用它做一條不斷追
逐自己尾巴
的蛇，這樣的動(dòng)畫(huà)。Sonic使用了HTML5的canvas元素和其相關(guān)API。它基于在一定小的時(shí)間間隔上，基于預(yù)定義的路徑，畫(huà)出下一個(gè)形狀，從而
完成動(dòng)畫(huà)效果。你可以使用arc，bezier，或line的方法來(lái)定義路徑。
這個(gè)需要用到H5新標(biāo)簽：canvas繪制圖形，利用js來(lái)實(shí)現(xiàn)抽獎(jiǎng)效果，實(shí)現(xiàn)步驟如下：
var num = 6; // 獎(jiǎng)品數(shù)量 var canvas = document.getElementById('canvas'); var
btn = document.getElementById('btn'); if(!canvas.getContext){
alert('抱歉！瀏覽器不支持。'); return; } // 獲取繪圖上下文 var ctx = canvas.getContext('2d'); for
(var i = 1; i = num; i++) { // 保存當(dāng)前狀態(tài) ctx.save(); // 開(kāi)始一條新路徑
ctx.beginPath(); // 位移到圓心，下面需要圍繞圓心旋轉(zhuǎn) ctx.translate(150, 150); // 從(0,
0)坐標(biāo)開(kāi)始定義一條新的子路徑 ctx.moveTo(0, 0); // 旋轉(zhuǎn)弧度,需將角度轉(zhuǎn)換為弧度,使用 degrees * Math.PI/180
公式進(jìn)行計(jì)算。 ctx.rotate(360 / num * i * Math.PI/180); // 繪制圓弧 ctx.arc(0, 0, 150, 0, 2
* Math.PI / num, false); if (i % 2 == 0) { ctx.fillStyle = '#ffb820'; }else{
ctx.fillStyle = '#ffcb3f'; } // 填充扇形 ctx.fill(); // 繪制邊框 ctx.lineWidth = 0.5;
ctx.strokeStyle = '#f48d24'; ctx.stroke(); // 恢復(fù)前一個(gè)狀態(tài) ctx.restore(); }
使用HTML5畫(huà)布canvas能夠快速實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果，基本原理如下：
每隔一定時(shí)間繪制圖形并且清除圖形，用來(lái)模擬出一個(gè)動(dòng)畫(huà)過(guò)程，可以使用context.clearRect(0, 0, x, y)方法來(lái)刷新需要繪制的圖形
首先是繪制圖形的方法，如下：
function?myAnimation()?{
ctx.clearRect(0,?0,?canvas_size_x,?canvas_size_y);
if?(x_icon??0?||?x_icon??canvas_size_x?-?size_x)?{
stepX?=?-stepX;
}
if?(y_icon??0?||?y_icon??canvas_size_y?-?size_y)?{
stepY?=?-stepY;
}
x_icon?+=?stepX;
y_icon?+=?stepY;
ctx.drawImage(anim_img,?x_icon,?y_icon);
}
以上方法每隔一定時(shí)間清除畫(huà)布內(nèi)容，并且重新計(jì)算繪制圖形位置，一旦超過(guò)了畫(huà)布大小，則反轉(zhuǎn)坐標(biāo)繪制圖形。
重慶分公司
重慶分公司
