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

讷言丶

已于 2022-07-12 16:55:09 修改

阅读量1.4k

点赞数 2

分类专栏： CSS 文章标签： css3 css html

于 2021-12-09 11:35:08 首次发布

本文链接：https://blog.csdn.net/weixin_51033461/article/details/121809848

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3D效果图片倒影特效

预览

在这里插入图片描述

实现原理

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

direction 定义方向，取值包括 above 、 below 、 left 、 right。
above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边
offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
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>

倒影属性兼容性：
在这里插入图片描述

讷言丶

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3D旋转木马效果+图片倒影特效

CSS3D效果图片倒影特效预览实现比较简单，主要应用到的属性是CSS3的3d视图和动画以及倒影特效属性：box-reflect以下是倒影特效属性的属性值direction 定义方向，取值包括 above 、 below 、 left 、 right。above：指定倒影在对象的上边below：指定倒影在对象的下边left：指定倒影在对象的左边right：指定倒影在对象的右边offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。
复制链接

扫一扫