HTML5+CSS3小實例：3D旋轉木馬相冊

HTML5+CSS3做一個3D旋轉木馬相冊，鼠標懸停時，停止旋轉，移開繼續(xù)旋轉，大家把圖片替換成自己的即可。

10年積累的成都網站制作、網站建設經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有杭州免費網站建設讓你可以放心的選擇與我們合作。

效果：

源碼：

html5 3d旋轉相冊代碼怎么用

以下是代碼：

!DOCTYPE html

html

head

titletransform-style實現Div的3D旋轉-柯樂義/title

style

*{font-size: 24px;color: #00ff00; padding:0; margin:0;}

#container {

position: relative;

height: 300px;

width: 300px;

-webkit-perspective: 500;

margin-top: 200px;

margin-right: auto;

margin-left: auto;

}

#parent-keleyi-com {

margin: 10px;

width: 280px;

height: 280px;

background-color: #666;

opacity: 0.3;

-webkit-transform-style: preserve-3d;

-webkit-animation: spin 15s infinite linear;

}

#parent-keleyi-com div {

position: absolute;

top: 40px;

left: 40px;

width: 280px;

height: 200px;

padding: 10px;

-webkit-box-sizing: border-box;

}

#parent-keleyi-com :first-child {

background-color: #000;

-webkit-transform: translateZ(-100px) rotateY(45deg);

}

#parent-keleyi-com :last-child {

background-color: #333;

-webkit-transform: translateZ(50px) rotateX(20deg);

-webkit-transform-origin: 50% top;

}

/*執(zhí)行Y軸旋轉360度動畫*/

@-webkit-keyframes spin {

from {-webkit-transform: rotateY(0);}

to {-webkit-transform: rotateY(360deg);}

}

/style

/head

body

div請使用支持CSS3的瀏覽器a href="" target="_blank"原文/a/div

div id="container"

div id="parent-keleyi-com"

diva href="/"柯樂義/a/div

diva href="/"keleyi.com/a/div

/div

/div

/body

/html

用html5 css怎么做3d相冊?

HTML5非常強大，尤其是和CSS3結合，有時候能達到非同凡響的網頁動畫效果。今天要分享的這款HTML5應用就是一款很酷的3D立體圖片相冊應用，它可以用鼠標多拽從多個角度瀏覽相冊圖片，點擊圖片，就可以放大圖片。

用html5 css怎么做3d相冊

HTML5非常強大，尤其是和CSS3結合，有時候能達到非同凡響的網頁動畫效果。今天要分享的這款HTML5應用就是一款很酷的3D立體圖片相冊應用，它可以用鼠標多拽從多個角度瀏覽相冊圖片，點擊圖片，就可以放大圖片，相冊圖片都是美女，千萬別讓女朋友看到。

文章名稱：3d相冊html5,3D相冊代碼
文章路徑：http://chinadenli.net/article37/dsihepj.html

成都網站建設公司_創(chuàng)新互聯，為您提供靜態(tài)網站、搜索引擎優(yōu)化、云服務器、用戶體驗、自適應網站、網站策劃

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯