Question

我遇到了一个问题，我们想尽全力以赴，但似乎无法理解为什么会发生这种情况。

我们使用CSS3创建了此地图（https://www.kaeskoppenstad.nl/programma）。这是一个变换后的图像，其上具有定位标记的div，并根据鼠标指针的位置进行动画处理。

示例代码：

<div id="map-wrapper">
 <div style="-webkit-perspective: 1500; -moz-perspective: 1500px;">
  <div id="map" style="transform-style: preserve-3d; transform: matrix3d(0.993895, 0.0432902, -0.10148, 0, 0.0432908, 0.693016, 0.719621, 0, 0.102, -0.723306, 0.690428, 0, 0, 0, 0, 1);">
   <div id="hotspots">

      <!-- marker 1 -->
      <a href="programma#de-kleyne-kaesmarkt" id="hotspot" class="hotspot act" style="top: 38%; left:17%;">
        <div class="table info" style="transform: scale(0.924, 1);">                                                
          <div class="table-cell icon">
            <div class="map-icon acts white"></div>
          </div>
          <div class="table-cell text">
            <div class="title">De kleyne Kaesmarkt</div>
            <div class="location">Waagplein</div>
         </div>                                              
       </div>   
     </a>

     <!-- marker 2 -->
     <a href="programma#carrousel" id="hotspot" class="hotspot goeddoel" style="top: 31%; left:19%;">
       <div class="table info" style="transform: scale(0.938, 1);">                                                
         <div class="table-cell icon">
           <div class="map-icon goededoelen white"></div>
         </div>
         <div class="table-cell text">
           <div class="title">Carrousel: de paertjes van alckmaer</div>
           <div class="location">Waagplein</div>
         </div>                                              
       </div>   
     </a>

   <!-- in the live version al lot of more markers are added obviously -->
   </div>

   <!-- map itself -->
   <img id="map-bg" src="assets/site/styles/images/map.png">
  </div>
 </div>
</div>

应用CSS（仅添加我认为重要的内容）：

#hotspots .hotspot {
  text-decoration: none;
  display: block;
  cursor: pointer;
  position: absolute;
  height: 58px;
  width: 34px;
  z-index: 100;
  background: url(images/pin.png) 0 0/cover;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-90deg) translateZ(40px);
  transform: rotateX(-90deg) translateZ(40px);
  transition: opacity .3s ease-out;
  -webkit-transition: opacity .3s ease-out;
}

.info {
  position: absolute;
  bottom: 68px;
  margin-left: -67px;
  opacity: 0;
  transition: all .3s cubic-bezier(0.7,0,.3,1);
  -webkit-transition: all .3s cubic-bezier(0.7,0,.3,1);
  visibility: hidden;
}

在除Firefox之外的大多数浏览器中，所有功能都可以正常工作。该地图正在显示并正确设置了动画，但标记和叠加层div未显示。似乎标记在某种程度上位于地图的后面，但是我们尝试使用z-index或重新排列HTML的任何操作均无效。

这里有人可以对此有所启发吗？

如果需要更多信息，请告诉我。乐于提供并解决此问题。

在Firefox中的变形元素上看不到背景图像

0 个答案: