css 实现图片3D旋转效果（那些年写过的转圈圈）

最新推荐文章于 2025-03-25 15:23:29 发布

Venus865

最新推荐文章于 2025-03-25 15:23:29 发布

阅读量432

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_73092591/article/details/145872705

版权

css实现图片旋转效果还是很容易的，不说废话直接上，先看下效果

实现起来也不复杂，主要用到的css样式有：
transform-style, transform, animation, -webkit-box-reflect，会在代码里一一介绍，如下

.container {
  width: 800px;
  height: 600px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  .item-box {
    width: 200px;
    height: 200px;
    // transform-style 指定子元素在 3D 空间中的呈现方式
    transform-style: preserve-3d; // 保持3d变换
    // transform, 用于对元素进行 2D 或 3D 变换
    transform: rotateX(-15deg) rotateY(0deg); // 初始值添加一些旋转，呈现立体感
    animation: rotation 18s linear infinite; // 实现动画效果
  }
  // 360度循环旋转
  @keyframes rotation {
    to {
      transform: rotateX(-15deg) rotateY(360deg);
    }
  }
  // 此处为预编译样式写法（less,sass,scss），css需单独一个个的去写
  $n: 6;
  $pDeg: 360deg / $n;
  .item {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 0 10px rgb(240, 240, 240);
    border: 3px solid #fff;
    // 产生倒影，效果更佳
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent , #000);
    // 遍历填充样式
    @for $i from 1 through $n {
      &:nth-child(#{$i}) {
        transform: rotateY($pDeg * $i) translateZ(250px);
        .img {
          background-image: url('../assets/neza'+#{$i}+'.png'); // 此处为图片路径
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }
  }
  .img {
    width: 100%;
    height: 100%;
  }
};

<div className="container">
    <div className="item-box">
      <div className="item item1">
        <div className="back"></div>
        <div className="img" />
      </div>
      <div className="item item2">
        <div className="back"></div>
        <div className="img" />
      </div>
      <div className="item item3">
        <div className="back"></div>
        <div className="img" />
      </div>
      <div className="item item4">
        <div className="back"></div>
        <div className="img" />
      </div>
      <div className="item item5">
        <div className="back"></div>
        <div className="img" />
      </div>
      <div className="item item6">
        <div className="back"></div>
        <div className="img" />
      </div>
    </div>
  </div>

最后留一道优化题，如何实现图片在旋转到后边时，可以显示图片的背面，而不是仍然显示图片，知道的可以评论留言哦～