个回答

• 慕斯8234454

  2020-05-09 10:35:14

  第五个气泡的scale3d 需改成 scale3d(0.5,0.5,1)

  0

• ca_xy15

  2016-07-29 17:45:40

  因为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);
  }

  
  

  
  

  
  

  0

• 慕哥5134882

  2016-07-14 11:05:04

  样式表最后加这个

  第五个气泡样式加translateY，删掉origin就可以啦，不要问我为什么，我也不知道

  
  

  0