HTML相册魔方

最新推荐文章于 2024-09-05 17:28:20 发布

守夜人st

最新推荐文章于 2024-09-05 17:28:20 发布

阅读量831

点赞数 3

文章标签： html css3 css

本文链接：https://blog.csdn.net/shouyeren_st/article/details/126128641

版权

七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
参与发布文章即可获得【话题达人】勋章，参与多个话题还可进行勋章升级喔！

记录一起走过的那些日子

讲述和亲爱的TA一起经历的那些故事

那些初见印象
那些浪漫的开始
那些铭记于心的大小事
那些经历的曲折
那些经历的幸福与快乐
那些珍贵的瞬间
那些对未来的期许/计划
…

创意代码表白

以程序员的方式撒狗粮，专业浪漫，值得拥有！

效果演示
制作步骤/过程

<!--
 * @Author: OriginalCoder
 * @Date: 2020-10-29 12:39:14
 * @version: 
 * @LastEditTime: 2020-10-29 13:59:12
 * @LastEditors: OriginalCoder
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D旋转相册 | ITWCN</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: radial-gradient(#ccc, rgb(156, 211, 211));
      }
      .container {
        width: 300px;
        height: 300px;
        position: relative;

        /* 样式 */
        transform-style: preserve-3d;
        /* transform: rotateX(-20deg) rotateY(-20deg); */
        animation: rotate 10s linear alternate infinite;
      }
      .container .item {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.7s;
        box-shadow: 0 0 10px #000000;
      }
      img {
        width: 300px;
        height: 300px;
      }
      /* img:hover {
        width: 400px;
        height: 400px;
      } */

      .container .front {
        transform: translateZ(150px);
      }
      .container .back {
        transform: rotateY(180deg) translateZ(150px);
      }
      .container .left {
        transform: rotateY(-90deg) translateZ(150px);
      }
      .container .right {
        transform: rotateY(90deg) translateZ(150px);
      }
      .container .top {
        transform: rotateX(90deg) translateZ(150px);
      }
      .container .bottom {
        transform: rotateX(-90deg) translateZ(150px);
      }

      @keyframes rotate {
        0%,
        5% {
          transform: rotateY(90deg);
        }
        20%,
        25% {
          transform: rotateY(180deg);
        }
        40%,
        45% {
          transform: rotateY(270deg);
        }
        60%,
        65% {
          transform: rotateX(-90deg);
        }
        80%,
        85% {
          transform: rotateX(0);
        }
        95%,
        100% {
          transform: rotateX(90deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item front"><img src="https://n.sinaimg.cn/sinakd10118/37/w960h1477/20200609/50e5-iuvaazn5577948.jpg" alt="" /></div>
      <div class="item back"><img src="https://www.mlito.com/wp-content/uploads/2018/03/9bd79a26e0.jpg" alt="" /></div>
      <div class="item left"><img src="https://x0.ifengimg.com/res/2020/632D1141F728C15492EA31FF899BF8F5C18F3B9D_size48_w640_h897.jpeg" alt="" /></div>
      <div class="item right"><img src="https://www.mlito.com/wp-content/uploads/2018/03/2ff5b440ec.jpg" alt="" /></div>
      <div class="item top"><img src="https://img.bizhizu.com/up/e1/e0/d2/e1e0d2a96ab4cd3d16646d258b53d355.jpg.source.jpg" alt="" /></div>
      <div class="item bottom"><img src="https://www.whhost.net/tu/201911/201911111523-6783.jpg" alt="" /></div>
    </div>
  </body>
</html>