                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3实现漂亮ToolTips效果

就是最后一个缩放的特效为何没有表现出来

就是我下的源码这个效果也没有啊，在火狐下和谷歌下都没有反应

qq_逆水寒_3

2016-05-26

源自：CSS3实现漂亮ToolTips效果

关注问题我要回答

1235

操作

收起

3 回答

慕斯8234454
2020-05-09

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

0 回复有任何疑惑可以回复我~

收起回答

ca_xy15
2016-07-29

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