?程序示例精選
Html 3D旋轉(zhuǎn)相冊(cè)制作
如需安裝運(yùn)行環(huán)境或遠(yuǎn)程調(diào)試，見文章底部微信名片，由專業(yè)技術(shù)人員遠(yuǎn)程協(xié)助！文章來源地址http://www.zghlxwxcb.cn/news/detail-519667.html
前言
這篇博客針對(duì)<<Html 3D旋轉(zhuǎn)相冊(cè)制作>>編寫代碼，代碼整潔，規(guī)則，易讀。 學(xué)習(xí)與應(yīng)用推薦首選。
?
文章目錄
????????一、所需工具軟件
????????二、使用步驟?
????????????????1.?導(dǎo)入相片文件
????????????????2.?代碼實(shí)現(xiàn)
? ? ? ? ? ? ? ? 3. 運(yùn)行結(jié)果
?????????三、在線協(xié)助
一、所需工具軟件
??????????1.?瀏覽器
??????????2.?Html代碼編輯器
二、使用步驟
1.導(dǎo)入相片文件
將相片文件放入images文件夾：?
2.代碼實(shí)現(xiàn)
代碼如下（示例）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>3D旋轉(zhuǎn)</title>
<style type="text/css">
*{padding: 0;
margin: 0;}
body,html{height:100%;}
body{background-image: url("images/b1.png");background-size: 100% 100%;}
#box{width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: go 45s linear infinite;
}
#box img{width: 380px;
height: 400px;
position: absolute;
left: 0;
top: 0;
border-radius: 55px;
}
#box img:nth-child(1){
transform: rotateY(0deg) translateZ(650px);}
#box img:nth-child(2){
transform: rotateY(36deg) translateZ(650px);}
#box img:nth-child(3){
transform: rotateY(72deg) translateZ(650px);}
#box img:nth-child(4){
transform: rotateY(108deg) translateZ(650px);}
#box img:nth-child(5){
transform: rotateY(144deg) translateZ(650px);}
#box img:nth-child(6){
transform: rotateY(180deg) translateZ(650px);}
#box img:nth-child(7){
transform: rotateY(216deg) translateZ(650px);}
#box img:nth-child(8){
transform: rotateY(252deg) translateZ(650px);}
#box img:nth-child(9){
transform: rotateY(288deg) translateZ(650px);}
#box img:nth-child(10){
transform: rotateY(324deg) translateZ(650px);}
}
</style>
</head>
<body>
<div id="box">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">
<img src="images/10.jpg">
</div>
</body>
</html>
3.運(yùn)行結(jié)果如下：?
文章來源：http://www.zghlxwxcb.cn/news/detail-519667.html
三、在線協(xié)助：?
如需安裝運(yùn)行環(huán)境或遠(yuǎn)程調(diào)試，見文章底部微信名片，由專業(yè)技術(shù)人員遠(yuǎn)程協(xié)助！
到了這里，關(guān)于Html 3D旋轉(zhuǎn)相冊(cè)制作的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
