超火 3D 照片墙

最新推荐文章于 2024-11-09 23:49:56 发布

谢清林%

最新推荐文章于 2024-11-09 23:49:56 发布

阅读量108

点赞数

文章标签： 3d 前端

原文链接：https://blog.csdn.net/m0_51269961/article/details/124294448

版权

index.html

<!--
 * @Author: coder-jason
 * @Date: 2022-04-20 11:38:07
 * @LastEditTime: 2022-04-20 12:27:05
-->
<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>超火🔥照片墙</title>
      <link rel="stylesheet" href="./style.css">
      <link rel="icon" type="image/png" href="https://coder-jason.cn/images/favicon-32x32.png">
</head>

<body>
      <div class="perspective">
            <div class="wrap" id="imgwrap">
                  <img src="./img/1.jpg" alt="demo">
                  <img src="./img/2.jpg" alt="demo">
                  <img src="./img/3.jpg" alt="demo">
                  <img src="./img/4.jpg" alt="demo">
                  <img src="./img/5.jpg" alt="demo">
                  <img src="./img/6.jpg" alt="demo">
                  <img src="./img/7.jpg" alt="demo">
                  <img src="./img/8.jpg" alt="demo">
                  <img src="./img/9.jpg" alt="demo">
                  <img src="./img/10.jpg" alt="demo">
                  <img src="./img/11.jpg" alt="demo">
                  <img src="./img/12.jpg" alt="demo">
                  <img src="./img/13.jpg" alt="demo">
                  <img src="./img/14.jpg" alt="demo">
                  <img src="./img/15.jpg" alt="demo">
                  <img src="./img/16.jpg" alt="demo">
                  <img src="./img/17.jpg" alt="demo">
                  <img src="./img/18.jpg" alt="demo">
                  <img src="./img/19.jpg" alt="demo">
                  <img src="./img/20.jpg" alt="demo">
            </div>
      </div>
      <script type="text/javascript" src="script.js"></script>
</body>

</html>

style.css

/* 
 * @Author: coder-jason
 * @Date: 2022-04-20 11:38:07
 * @LastEditTime: 2022-04-20 12:27:38
*/
* {
      margin: 0; 
      padding: 0;
}

body {
      background: #222;
      overflow: hidden;
      user-select: none;
      background-image: url(./img/bgi.png);
}

.perspective {
      perspective: 800px;
}

.wrap {
      width: 95px;
      height: 200px;
      margin: 100px auto;
      position: relative;
      transform: rotateX(-20deg) rotateY(0deg);
      transform-style: preserve-3d;
}

.wrap img {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      transform: rotateY(0deg) translateZ(0px);
      background: transparent;
      box-shadow: 0 0 4px #fff;
      border-radius: 5px;
}

.wrap p {
      width: 1200px;
      height: 1200px;
      background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
      position: absolute;
      border-radius: 50%;
      left: 50%;
      top: 100%;
      margin-left: -600px;
      margin-top: -600px;
      transform: rotateX(90deg);
}