HTML+CSS实现3D旋转相册

最新推荐文章于 2024-07-25 11:52:30 发布

王菜鸟

最新推荐文章于 2024-07-25 11:52:30 发布

阅读量7k

点赞数 12

分类专栏： 04-前端技术文章标签： css html css3 animation

本文链接：https://blog.csdn.net/qq_44723773/article/details/109357863

版权

04-前端技术专栏收录该内容

45 篇文章 3 订阅

订阅专栏

介绍

在前几篇博客中介绍了transform的属性，那么再经过几天的学习之后，现在对transform的属性有了更多了理解，同时也通过自己的想法，完成了下面的作品：
实现一个3D的旋转相册
在这里插入图片描述

代码

废话不多说，直接上代码吧~

<!--
 * @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="./images/1.jpg" alt="" /></div>
      <div class="item back"><img src="./images/1.jpg" alt="" /></div>
      <div class="item left"><img src="./images/1.jpg" alt="" /></div>
      <div class="item right"><img src="./images/1.jpg" alt="" /></div>
      <div class="item top"><img src="./images/1.jpg" alt="" /></div>
      <div class="item bottom"><img src="./images/1.jpg" alt="" /></div>
    </div>
  </body>
</html>