Question

我正在尝试执行工具提示效果，如以下链接所示：http://tympanus.net/Development/TooltipStylesInspiration/line.html

我有两个问题：

首先 - 当你将鼠标悬停在粉红色条上时，我无法弄清楚为什么transform: scale3d在这里不起作用。我错过了CSS中的任何内容吗？

第二 - 为什么我的白条在绿色箭头下面？我分别设置了元素position: absolute但bottom: 200%和bottom: 100%。难道他们不能坐在粉红色酒吧上方与父母身高的距离（a.wrapper AKA粉红色酒吧）？

提前谢谢！

Answer 1

首先：transform: scale3d is not working

嗯，这很有效。事实上，它工作得如此之快，以至于你甚至都注意不到。在这里，您需要应用转换速度。 transition:1s

第二：您无需设置bottom:100%

.content::after{
content: "";
width: 0; 
height: 0;
border-top: 10px solid green;
border-left:10px solid transparent;
border-right:10px solid transparent;    
opacity: 0;
transition: opacity .4s ease-in-out;    
position: absolute;
left: 50%;
bottom: -10px; /*----adjusted it.----*/
transform: translateX(-50%);

}

希望这对你有所帮助。您的updated Code和this is几乎就是您想要的。如果仍然遇到任何问题，请回来。！

css 3dscale（x，y，z）无法正常工作

1 个答案: