html+css实现3D相册

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册</title>
<style type="text/css">
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{margin:0;padding:0;
}
body{background: black;
}
.content{width: 200px;height: 150px;position: relative;margin:200px auto 0;perspective: 1500px;
}
.box{width: 200px;height: 150px;transform-style: preserve-3d;transform:rotateX(-30deg);animation:photo 15s linear infinite;
}
.box:hover{animation:photo 15s linear infinite paused;
}
.box img{width: 200px;height: 150px;position: absolute;left: 0;top: 0;transform-style: preserve-3d;transition: all 1s;
}
.box img:nth-child(1){transform:translateZ(280px);
}
.box img:nth-child(2){transform:rotateY(40deg) translateZ(280px);
}
.box img:nth-child(3){transform:rotateY(80deg) translateZ(280px);
}
.box img:nth-child(4){transform:rotateY(120deg) translateZ(280px);
}
.box img:nth-child(5){transform:rotateY(160deg) translateZ(280px);
}
.box img:nth-child(6){transform:rotateY(200deg) translateZ(280px);
}
.box img:nth-child(7){transform:rotateY(240deg) translateZ(280px);
}
.box img:nth-child(8){transform:rotateY(280deg) translateZ(280px);
}
.box img:nth-child(9){transform:rotateY(320deg) translateZ(280px);
}.box img:nth-child(1):hover{transform:translateZ(280px) scale(1.2);
}
.box img:nth-child(2):hover{transform:rotateY(40deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(3):hover{transform:rotateY(80deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(4):hover{transform:rotateY(120deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(5):hover{transform:rotateY(160deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(6):hover{transform:rotateY(200deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(7):hover{transform:rotateY(240deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(8):hover{transform:rotateY(280deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(9):hover{transform:rotateY(320deg) translateZ(280px) scale(1.2);
}@keyframes photo{0%{transform:rotateX(-30deg) rotateY(0deg);}100%{transform:rotateX(-30deg) rotateY(360deg);}
}
</style>
</head>
<body>
<div class="content"><div class="box"><img src="img/img1.jpg" alt=""/><img src="img/img2.jpg" alt=""/><img src="img/img3.jpg" alt=""/><img src="img/img4.jpg" alt=""/><img src="img/img5.jpg" alt=""/><img src="img/img6.jpg" alt=""/><img src="img/img7.jpg" alt=""/><img src="img/img8.jpg" alt=""/><img src="img/img9.jpg" alt=""/></div>
</div>
</body>
</html>

html+css实现3D相册相关推荐

一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 一行代码教你七夕情人节如何告白-动漫3D相册(音乐+文字)HTML+CSS+JavaScript 七夕是中国的情人节,七夕520情人节也是一个非常适合表白的日子,可以把自己平常害怕说出来的话,在这 ...
❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 520七夕情人节告白网页代码❀-浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动 ...
3D相册加背景图和背景音乐
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
❉ 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在 ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...
一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
HTML5七夕情人节表白网页制作 __浪漫空中散落的花瓣3D相册__ HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤浪漫空中散落的花瓣3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人 ...

html+css实现3D相册

html+css实现3D相册相关推荐

最新文章

热门文章