照片墙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>

相关推荐
Kyln.Wu5 分钟前
【python实用小脚本-131】Python 实现 HTML 到 PDF 转换:解决文档处理痛点的高效工具
python·pdf·html
傻球29 分钟前
彻底搞懂「像素/PPI/DPI/分辨率/DPR/缩放」之间的关系
前端·css
ai小鬼头34 分钟前
AIStarter:一键部署AI工具,轻松提升效率的秘密武器!
css·人工智能·github
知识分享小能手13 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
Jokerator14 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
Savior`L17 小时前
CSS知识复习4
前端·css
我要让全世界知道我很低调18 小时前
记一次 Vite 下的白屏优化
前端·css
again43220 小时前
css生效规则
css
Esun_R20 小时前
使用CSS选择器选择列表中最后一个子元素的几种情况
css