CSS3D旋转木马效果+图片倒影特效

Love The Way You Lie 2023-10-01 08:54 3阅读 0赞

### CSS3D效果图片倒影特效 ###

## 预览 ##

![在这里插入图片描述][5e2492a9670d4277a20edd1f0afe30e7.gif_pic_center]

## 实现原理 ##

主要应用到的属性是CSS3的3d视图（这个在前期的动画学习中有提到过，大家可以点开本专栏中的其他特效来看看！）和动画以及倒影特效属性：box-reflect  
以下是倒影特效属性的属性值

1.  direction 定义方向，取值包括 above 、 below 、 left 、 right。  
    above：  
    指定倒影在对象的上边  
    below：  
    指定倒影在对象的下边  
    left：  
    指定倒影在对象的左边  
    right：  
    指定倒影在对象的右边
2.  offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。  
    用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
3.  mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。  
    取值：  
    none：无遮罩图像。  
    linear-gradient：使用线性渐变创建遮罩图像。  
    radial-gradient：使用径向(放射性)渐变创建遮罩图像。  
    repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。  
    repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。

## 源码 ##

<!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>3D照片墙</title>
      <style>
        html,
        body {
          
          background: #000;
        }
    
        .container {
          
          position: relative;
        }
    
        .stage {
          
          position: relative;
          width: 800px;
          height: 240px;
          margin: 10% auto;
          perspective: 2000px;
          transform-style: preserve-3d;
          -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
        }
    
        .stage .control {
          
          position: relative;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
          animation: rotate 30s linear infinite;
        }
    
        .stage .control .imgWrap {
          
          position: absolute;
          width: 400px;
          height: 400px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transform-style: preserve-3d;
        }
    
        .stage .control .imgWrap .img {
          
          position: absolute;
          width: 500px;
          height: 400px;
          line-height: 400px;
          text-align: center;
          font-size: 120px;
          top: 0;
          left: 0;
          transform-style: preserve-3d;
          transform-origin: 50% 50% 0px;
        }
    
        .stage .control .imgWrap img {
          
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    
        .stage .control .imgWrap .img1 {
          
          transform: rotateY(80deg) translateZ(650px);
        }
    
        .stage .control .imgWrap .img2 {
          
          transform: rotateY(125deg) translateZ(650px);
        }
    
        .stage .control .imgWrap .img3 {
          
          transform: rotateY(170deg) translateZ(650px);
        }
    
        .stage .control .imgWrap .img4 {
          
          transform: rotateY(215deg) translateZ(650px);
        }
        .stage .control .imgWrap .img5 {
          
          transform: rotateY(260deg) translateZ(650px);
        }
    
        .stage .control .imgWrap .img6 {
          
          transform: rotateY(305deg) translateZ(650px);
        }
    
        .stage .control .imgWrap .img7 {
          
          transform: rotateY(350deg) translateZ(650px);
        }
    
        .stage .control .imgWrap .img8 {
          
          transform: rotateY(395deg) translateZ(650px);
        }
    
        @keyframes rotate {
          
          0% {
          
            transform: translateZ(-2000px) rotateY(0deg);
          }
    
          50% {
          
            transform: translateZ(-2000px) rotateY(-360deg);
          }
    
          100% {
          
            transform: translateZ(-2000px) rotateY(-720deg);
          }
        }
      </style>
    </head>
    
    <body>
      <div class="container">
        <div class="stage">
          <div class="control">
            <div class="imgWrap">
              <div class="img img1">
                <img src="https://img0.baidu.com/it/u=2948507730,366864743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333">
              </div>
              <div class="img img2">
                <img src="https://img0.baidu.com/it/u=3497736752,3489380243&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333">
              </div>
              <div class="img img3">
                <img src="https://img1.baidu.com/it/u=4176596244,2087050683&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400">
              </div>
              <div class="img img4">
                <img src="https://img1.baidu.com/it/u=101343263,2767669969&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333">
              </div>
              <div class="img img5">
                <img src="https://img2.baidu.com/it/u=4101108356,2385848699&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400">
              </div>
              <div class="img img6">
                <img src="https://img2.baidu.com/it/u=3184536438,1657368344&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=411">
              </div>
              <div class="img img7">
                <img src="https://img0.baidu.com/it/u=3641792508,719781706&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281">
              </div>
              <div class="img img8">
                <img src="https://img2.baidu.com/it/u=2645719931,682188402&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333">
              </div>
            </div>
          </div>
        </div>
      </div>
    </body>
    
    </html>

**倒影属性兼容性**：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6IiG55-l5LqO6KGM5Li2_size_20_color_FFFFFF_t_70_g_se_x_16]

[5e2492a9670d4277a20edd1f0afe30e7.gif_pic_center]: https://img-blog.csdnimg.cn/5e2492a9670d4277a20edd1f0afe30e7.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6IiG55-l5LqO6KGM5Li2_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/320c5d3a18744e8e8dc2c56346c75e4a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6IiG55-l5LqO6KGM5Li2,size_20,color_FFFFFF,t_70,g_se,x_16