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

相关推荐
小肚肚肚肚肚哦7 小时前
CSS 伪类函数 :where 简介
前端·css
小肚肚肚肚肚哦7 小时前
伪元素与普通元素的层级关系问题浅析
前端·css
~无忧花开~8 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
小九今天不码代码8 小时前
深入理解 CSS 表格布局:table-layout 的秘密与实战详解(附费用报销单案例)
css·前端开发·表格布局·web设计·table-layout·页面优化·样式布局
雨过天晴而后无语13 小时前
HTML纯JS添加删除行示例一
前端·javascript·html
luckyPian13 小时前
前端+AI:HTML5语义标签(一)
前端·ai·面试·html·html5·ai编程
有意义14 小时前
用HTML5、CSS和JavaScript创造代码敲击乐
html
trsoliu15 小时前
Tailwind CSS 类名管理工具实战指南
前端·css
汤姆Tom15 小时前
CSS 预处理器深入应用:提升开发效率的利器
前端·css·面试
皮皮虾我们跑15 小时前
前端HTML常用基础标
前端·javascript·html