Question

早上好〜！在这里得到了一个代码，该代码应该可以使我的箭头完美缩放和堆叠，但是无法。我需要使图像响应整个页面的缩放和最小化。一切正常，除了当我使用.effectimage { -Webkit-transform：scale（1.1）;}，但我需要使用它来使箭头相互连接。我需要它们像火车一样被连接起来，它们的头和尾巴相连。

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<style>
.effectimage {
-Webkit-transform:scale(1.1);
 }
.effectimage:hover {
    -position: static
   -transform: inherit;
 -transform-style: preserve-3d; 
  -webkit-transform: scale(1.36);
  -moz-transform: scale(1.36);
   -o-transform: scale(1.36); 
   transform: scale(1.36);
   transition: all 0.6s;
    -webkit-transition: all 0.9s;  
 }
</style>
<div>
<img Src="top title image" style="width:100%">
<div style="left:8px; top:47px; position:-webkit-sticky; max-width:200%; 
max-height:200%;">

 <img Src="GreenLeftArrow.png" class="effectfront" style="left:30px; 
   top:180px; width:32.4%;  height:auto;">
 <img Src="YellowMidArrow.png" class="effectfront" style="left:350px;    
   top:180px; width:30.9%; height:auto;">
 <img Src="PowerPinkF2.png" class="effectfront" style="left:810px; 
   top:180px; width:26.08%; height:auto;">

</div>
</div>
</body>
</html>

Answer 1

如果只想连接箭头，请将HTML更改为：

<div style="left:8px; top:47px; position:-webkit-sticky; max-width:200%; 
max-height:200%;">

 <img Src="GreenLeftArrow.png" class="effectfront" style="left:30px; 
   top:180px; width:32.4%;  height:auto;"><!--
 --><img Src="YellowMidArrow.png" class="effectfront" style="left:350px;    
   top:180px; width:30.9%; height:auto;"><!--
 --><img Src="PowerPinkF2.png" class="effectfront" style="left:810px; 
   top:180px; width:26.08%; height:auto;">

</div>

这会删除箭头之间的空格。

更多解决方案和信息：CSS-Tricks

使用Transform的Z索引堆叠问题

1 个答案: