CSS打造图片翻转立体3D效果

作者：System 时间：2024年08月19日分类：所有,css3 字数：1043

这篇文章距离上次修改已过229天，其中的内容可能已经有所变动。

要使用CSS创建图片翻转的3D效果，你可以使用transform属性中的rotateY函数来实现Y轴的旋转，以及使用perspective和transform-style来创建3D效果。以下是一个简单的例子：

HTML:

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="image-front.jpg" alt="Front Image">
    </div>
    <div class="back">
      <img src="image-back.jpg" alt="Back Image">
    </div>
  </div>
</div>

CSS:

.flip-container {
  perspective: 1000px; /* 创建3D效果的视距 */
}

.flipper {
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 让子元素在3D空间中呈现 */
  position: relative;
}

.front, .back {
  backface-visibility: hidden; /* 隐藏翻转的背面 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg); /* 翻转180度 */
  z-index: 1;
}

/* 鼠标悬浮时翻转 */
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

这段代码会创建一个容器，其中包含一个带有前后两个面的元素。当鼠标悬停在容器上时，.flipper会旋转180度，显示出背面的图片。通过设置backface-visibility: hidden;，可以在翻转时隐藏不可见的背面，给用户一种看起来像是图片翻转的效果。

CSS打造图片翻转立体3D效果

评论已关闭

推荐阅读