照片墙html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

*{

margin: 0;

padding: 0;

}

body{

background-color: peachpuff;

}

.bigbox{

width: 800px;

height: 400px;

margin: 80px auto 0px;

perspective: 1000px;

}

.box{

width: 800px;

height: 400px;

position: relative;

transition: all ease 1s;

transform-style: preserve-3d;

animation: rotate_img 15s ease infinite;

}

.card{

width: 200px;

height: 300px;

background-size: cover;

box-shadow: 0 0 8px #ffaaff;

-webkit-box-reflect: below 15px;

lineear-gradient(transparent,transparent,#ffaaff);

position: absolute;

bottom: 0px;

left: 50%;

margin-left: -130px;

}

.box1{

background-image: url(img/1.jpg);

transform: translateZ(300px);

}

.box2{

background-image: url(img/2.jpg);

transform: rotateY(51.4deg) translateZ(300px);

}

.box3{

background-image: url(img/3.webp);

transform: rotateY(102.8deg) translateZ(300px);

}

.box4{

background-image: url(img/4.jpg);

transform: rotateY(154.2deg) translateZ(300px);

}

.box5{

background-image: url(img/5.jfif);

transform: rotateY(205.7deg) translateZ(300px);

}

.box6{

background-image: url(img/6.webp);

transform: rotateY(257.1deg) translateZ(300px);

}

.box7{

background-image: url(img/7.jpg);

transform: rotateY(308.5deg) translateZ(300px);

}

@keyframes rotate_img{

0%{

transform: rotateX(-10deg) rotateY(0deg);

}

100%{

transform: rotateX(-10deg) rotateY(360deg);

}

}

</style>

</head>

<body>

<div class="bigbox">

<div class="box">

<div class="card box1"></div>

<div class="card box2"></div>

<div class="card box3"></div>

<div class="card box4"></div>

<div class="card box5"></div>

<div class="card box6"></div>

<div class="card box7"></div>

</div>

</div>

</body>

</html>

相关推荐
C+ 安口木10 小时前
CSS通用优惠券样式
前端·css
蓝莓味的口香糖12 小时前
【CSS】flex布局
前端·css
EveryPossible13 小时前
第一版代码
前端·javascript·css
杨超越luckly13 小时前
HTML应用指南:利用POST请求获取全国索尼体验型零售店位置信息
前端·arcgis·html·数据可视化·门店数据
会飞的小菠菜1 天前
快速将多个PPT、PPTX幻灯片统一转换成浏览器能直接打开的HTML网页文件
html·powerpoint·浏览器·ppt·格式转换·网页
Filotimo_1 天前
2.CSS3.(2).html
前端·css
L李什么李1 天前
HTML——使用表格制作简历
前端·javascript·html
我有一棵树1 天前
html 滚动条相关开发经验总结
前端·javascript·html
爱吃甜品的糯米团子1 天前
CSS Grid 网格布局完整指南:从容器到项目,实战详解
前端·css
我不是程序媛lisa1 天前
前端正确处理“文字溢出”的思路与最佳实践
前端·css3