第五個氣泡的scale3d 需改成 scale3d(0.5,0.5,1)

因為scaleZ()和scale3d()單獨使用時是沒有效果的，要配合其他的變形函數一起使用才會有效果，所以我在用scale3d()后多加一個變形函數，rotateY()，rotateX()，translateX()，translateY()等等，只要不影響你原來的動畫效果都行，或者用樓上那位同學的也可以實現。

/* icon3 */
.tooltip-effect-3 .tooltip-content {
? ?transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
? ?transform-origin: 50% 100%;
}
.tooltip-effect-3 .tooltip-content i {
? ?transform: scale3d(0,0,1) rotateY(0deg);
}

/* icon5 */
.tooltip-effect-5 .tooltip-content {
? ?transform: scale3d(0,0,1) rotateY(0deg);
? ?transform-origin: 50% 100%;
}
.tooltip-effect-5 .tooltip-content i {
? ?transform: translate3d(0,20px,0);
}

.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
? ?opacity: 1;
? ?transform: translate3d(0,0,0) rotate3d(1,1,1,0deg) scale3d(1,1,1);
}

/* 以下代碼要跟上面的分開寫，否則沒有效果 */

.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
? ?transform: scale3d(1,1,1) rotateY(0deg);
}

樣式表最后加這個

第五個氣泡樣式加translateY，刪掉origin就可以啦，不要問我為什么，我也不知道