gpt4 book ai didi

javascript - 使用 Transform 的 Z 索引堆叠问题

转载 作者:行者123 更新时间:2023-11-28 00:52:37 26 4
gpt4 key购买 nike

美好的一天~!在这里得到一个代码,应该让我的箭头完美缩放和堆叠但不能。我需要让图像响应整个页面的缩放和最小化。一切正常,除了当我使用 .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>

最佳答案

如果您只想连接箭头,请将 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

关于javascript - 使用 Transform 的 Z 索引堆叠问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53137094/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com