css 3dscale(x,y,z) 未按预期工作

Question

我正在尝试制作工具提示效果，如下 link 所示：http://tympanus.net/Development/TooltipStylesInspiration/line.html

我有两个问题:

首先 - 我无法弄清楚为什么当您将鼠标悬停在那个粉红色栏上时 transform: scale3d 在这里不起作用。我在 css 中遗漏了什么吗？

第二 - 为什么我的白色条在绿色箭头下方？我分别设置了 position: absolute 和 bottom: 200% 和 bottom: 100% 这两个元素。他们不应该坐在粉红色条上方他们 parent 的高度（a.wrapper 又名粉红色条）的距离吗？

提前致谢！

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, and this is几乎就是你想要的。如果仍然遇到任何问题，请回来。！

css 3dscale(x,y,z) 未按预期工作

css 3dscale(x,y,z) not working as intended

css

3d

transition

position

scale