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

Question

I am trying to do the tooltip effect as the following link shows: http://tympanus.net/Development/TooltipStylesInspiration/line.html

Please refer to my source code: http://jsfiddle.net/39a3ojwc/

I have two questions :

FIRST - I can not figure out why the transform: scale3d is not working here when you hover on that pink bar. Am I missing anything in the css?

SECOND - Why is my white bar underneath the green arrow? I set both element position: absolute but bottom: 200% and bottom: 100% respectively. Shouldn't they sit above the pink bar the amount of distance of their parent's height (a.wrapper AKA the pink bar)?

Thank you in advance!

Answer 1

First: transform: scale3d is not working

Well, this is working. In fact it is working so fast that you can't even notice. Here you need to apply the transition speed. transition:1s

Second: You need not to set the 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%);

}

Hope this help you. Your updated Code, and this is almost what you want. Do come back if still face any issue.!