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

因?yàn)閟caleZ()和scale3d()單獨(dú)使用時(shí)是沒(méi)有效果的，要配合其他的變形函數(shù)一起使用才會(huì)有效果，所以我在用scale3d()后多加一個(gè)變形函數(shù)，rotateY()，rotateX()，translateX()，translateY()等等，只要不影響你原來(lái)的動(dòng)畫(huà)效果都行，或者用樓上那位同學(xué)的也可以實(shí)現(xiàn)。

/* 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);
}

/* 以下代碼要跟上面的分開(kāi)寫(xiě)，否則沒(méi)有效果 */

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

樣式表最后加這個(gè)

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