devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

C3+H5小案例 | 03 3D立体旋转相册_h5 3d相册

作者：2023面试高手 | 2024-02-15 20:38:18

赞

踩

h5 3d相册

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>3D立体旋转相册</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         body{
  14.             height: 100vh;
  15.             display: flex;
  16.             justify-content: center;
  17.             align-items: center;
  18.             background-image: linear-gradient(200deg,#5ee7bf,#b490ca);
  19.         }
  20.         .container{
  21.             height: 500px;
  22.             width: 500px;
  23.             border-radius: 1px solid red;
  24.             display: flex;
  25.             justify-content: center;
  26.             align-items: center;
  27.         }
  28.         /* 外层图片 */
  29.         .out-div img{
  30.             width: 200px;
  31.             height: 200px;
  32.             /* 对图片进行剪切 保持原始比例 */
  33.             object-fit: cover;
  34.         }
  35.         /* 内层图片 */
  36.         .in-div img{
  37.             width: 100px;
  38.             height: 100px;
  39.             object-fit: cover;
  40.         }
  41.         .box{
  42.             width: 200px;
  43.             height: 200px;
  44.             position: absolute;
  45.             /* 盒子3D效果 */
  46.             transform-style: preserve-3d;
  47.             /* 动画 */
  48.             animation: animate 10s linear infinite;
  49.         }
  50.         .out-div{
  51.             width: 200px;
  52.             height: 200px;
  53.             position: absolute;
  54.             transition: transform 1s ease-in;
  55.         }
  56.         /* 设置前后上下左右面 */
  57.         .out-front{
  58.             transform: translateZ(100px);
  59.         }
  60.         .out-back{
  61.             transform: translateZ(-100px) rotate(180deg);
  62.         }
  63.         .out-left{
  64.             transform: translateX(-100px) rotateY(-90deg);
  65.         }
  66.         .out-right{
  67.             transform: translateX(100px) rotateY(90deg);
  68.         }
  69.         .out-top{
  70.             transform: translateY(-100px) rotateX(90deg);
  71.         }
  72.         .out-bottom{
  73.             transform: translateY(100px) rotateX(-90deg);
  74.         }
  75.         /* 鼠标经过六个面 */
  76.         .container:hover .out-front{
  77.             transform: translateZ(200px);
  78.         }
  79.         .container:hover .out-back{
  80.             transform: translateZ(-200px) rotate(180deg);
  81.         }
  82.         .container:hover .out-left{
  83.             transform: translateX(-200px) rotateY(-90deg);
  84.         }
  85.         .container:hover .out-right{
  86.             transform: translateX(200px) rotateY(90deg);
  87.         }
  88.         .container:hover .out-top{
  89.             transform: translateY(-200px) rotateX(90deg);
  90.         }
  91.         .container:hover .out-bottom{
  92.             transform: translateY(200px) rotateX(-90deg);
  93.         }
  94.         /* 内层 */
  95.         .in-div{
  96.             margin-top: 50px;
  97.             margin-left: 50px;
  98.             width: 100px;
  99.             height: 100px;
  100.             position: absolute;
  101.         }
  102.         .in-front{
  103.             transform: translateZ(50px);
  104.         }
  105.         .in-back{
  106.             transform: translateZ(-50px) rotate(180deg);
  107.         }
  108.         .in-left{
  109.             transform: translateX(-50px) rotateY(-90deg);
  110.         }
  111.         .in-right{
  112.             transform: translateX(50px) rotateY(90deg);
  113.         }
  114.         .in-top{
  115.             transform: translateY(-50px) rotateX(90deg);
  116.         }
  117.         .in-bottom{
  118.             transform: translateY(50px) rotateX(-90deg);
  119.         }
  120.         /* 定义动画 */
  121.         @keyframes animate{
  122.             0%{
  123.                 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  124.             }
  125.             100%{
  126.                 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  127.             }
  128.         }
  129.     </style>
  130. </head>
  131. <body>
  132.     <div class="container">
  133.         <div class="box">
  134.             <div class="out-div out-front">
  135.                 <img src="./../images/d3/01.jpg" alt="">
  136.             </div>
  137.             <div class="out-div out-back">
  138.                 <img src="./../images/d3/02.jpg" alt="">
  139.             </div>
  140.             <div class="out-div out-left">
  141.                 <img src="./../images/d3/03.jpg" alt="">
  142.             </div>
  143.             <div class="out-div out-right">
  144.                 <img src="./../images/d3/04.jpg" alt="">
  145.             </div>
  146.             <div class="out-div out-top">
  147.                 <img src="./../images/d3/05.jpg" alt="">
  148.             </div>
  149.             <div class="out-div out-bottom">
  150.                 <img src="./../images/d3/06.jpg" alt="">
  151.             </div>
  152.             <!-- 里层 -->
  153.             <div class="in-div in-front">
  154.                 <img src="./../images/d3/01.jpg" alt="">
  155.             </div>
  156.             <div class="in-div in-back">
  157.                 <img src="./../images/d3/02.jpg" alt="">
  158.             </div>
  159.             <div class="in-div in-left">
  160.                 <img src="./../images/d3/03.jpg" alt="">
  161.             </div>
  162.             <div class="in-div in-right">
  163.                 <img src="./../images/d3/04.jpg" alt="">
  164.             </div>
  165.             <div class="in-div in-top">
  166.                 <img src="./../images/d3/05.jpg" alt="">
  167.             </div>
  168.             <div class="in-div in-bottom">
  169.                 <img src="./../images/d3/06.jpg" alt="">
  170.             </div>
  171.         </div>
  172.     </div>
  173. </body>
  174. </html>

效果图：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/86775
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号