HTML+CSS+JavaScript实现图片3D展览的示例代码

HTML+CSS+JavaScript实现图片3D展览，其基本思路是通过HTML布局实现图片容器，CSS样式实现3D旋转效果，JavaScript实现交互和事件。下面我们就来一步步讲解实现的具体方法。

第一步：布局HTML

在HTML中创建一个外层容器div，设置宽高以及透视效果，然后在容器中添加一个内层容器ul，设置相应的宽高和位置。在ul中添加li标签作为图片容器，设置宽高和背景图片等属性，这里为了方便示例，直接采用本地图片。

<html>
<head>
  <style>
    .container {
      width: 600px;
      height: 400px;
      perspective: 800px;
      margin: 0 auto;
    }
    .showbox {
      position:absolute;left:0;top:0;width:450px;height:350px;
    }
    ul {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: relative;
      transform-style: preserve-3d;
    }
    li {
      position: absolute;
      width: 320px;
      height: 200px;
      overflow: hidden;
      border: 1px solid gray;
      text-align: center;
      color: white;
      background-size: cover;
      background-position: center;
      list-style: none;
      transform-style: preserve-3d;
    }
    li:nth-child(1) {
      left: 0;
      top: 80px;
      transform-origin: left center;
      transform: translateZ(220px);
      background-image: url("images/1.jpg");
    }
    li:nth-child(2) {
      left: 340px;
      top: 40px;
      transform-origin: center center;
      transform: translateZ(240px);
      background-image: url("images/2.jpg");
    }
    li:nth-child(3) {
      right: 0;
      top: 80px;
      transform-origin: right center;
      transform: translateZ(220px);
      background-image: url("images/3.jpg");
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="showbox"></div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

第二步：编写CSS样式

在CSS样式中设置li的3D旋转效果，使用transform属性完成，当鼠标进入图片区域时，图片旋转至正面展示。同时，为了让图片呈现空中浮动的效果，我们可以添加hover效果，当鼠标经过图片时，图片向上移动一段距离，就好像图片正在浮动一样。

    li:hover {
      transform: translateZ(150px);
    }
    li:hover .showbox { display:none }
    li:hover::before {
      content: "";
      display: block;
      position: absolute;
      left: -20px;
      top: -20px;
      right: -20px;
      bottom: -20px;
      background-color: rgba(0,0,0,.4);
      z-index: 1;
      pointer-events: none;
    }
    li:hover .showbox,li:hover::before {
      transform: translateZ(200px);
    }

第三步：编写JavaScript代码

在JavaScript中添加鼠标点击事件，当鼠标点击图片时，图片自动旋转到正面展示。可以使用事件代理的方式，为每一个li元素添加事件监听，代码如下：

const lis = document.querySelectorAll('li');
for(let i = 0 ; i < lis.length ; i++) {
  lis[i].onclick = function() {
    for(let j = 0 ; j < lis.length ; j++) {
      lis[j].classList.remove('active');
    }
    this.classList.add('active');
  }
}

示例说明1

在示例中，我们已经创建好了图片展示的HTML布局，下一步要实现的是3D旋转效果。具体做法是在CSS中给li元素设置3D旋转的transform属性，通过设置transform-origin属性可以控制旋转的中心点。需要注意的是，还要设置transform-style属性为preserve-3d，以保留3D空间的形态。

li:nth-child(1) {
  left: 0;
  top: 80px;
  transform-origin: left center;
  transform: translateZ(220px);
  background-image: url("images/1.jpg");
}

其中，li:nth-child(1)表示选择第一个li元素，left和top分别指定该元素的左和上的位置，transform-origin设置旋转中心点在左侧中心，transform设置3D旋转的距离。

示例说明2

在示例中，我们还添加了鼠标hover效果，当鼠标经过图片时，图片向上浮动一段距离，同时背景色也会加深，仿佛图片正在浮动。在CSS中，我们使用:hover伪类来实现鼠标hover效果，同时在li元素上添加了一个伪元素before，用于实现浮动时的背景遮罩层。

li:hover {
  transform: translateZ(150px);
}
li:hover::before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: -20px;
  right: -20px;
  bottom: -20px;
  background-color: rgba(0,0,0,.4);
  z-index: 1;
  pointer-events: none;
}

其中，hover效果通过transform: translateZ(150px)来实现，背景遮罩层则是使用伪元素before和背景色实现的，通过设置pointer-events:none可以让点击事件穿透该元素。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML+CSS+JavaScript实现图片3D展览的示例代码 - Python技术站