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

为什么我的气泡根本不旋转？

浏览器是chrome

代码照着视频写的，气泡根本不倾斜

p.s. 三角形我没用svg是用border写的，和这个有关系吗？

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" initial-scale="1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#" class="tooltip tooltip-effect-1">Home</a>
            <span class="tooltip-content"><i class="fa fa-home fa-fw"></i></span>
        </li>
        <li><a href="#" class="tooltip tooltip-effect-2">About me</a>
            <span class="tooltip-content"><i class="fa fa-user fa-fw"></i></span>
        </li>
        <li><a href="#" class="tooltip tooltip-effect-3">Photography</a>
            <span class="tooltip-content"><i class="fa fa-camera-retro fa-fw"></i></span>
        </li>
        <li><a href="#" class="tooltip tooltip-effect-4">Work</a>
            <span class="tooltip-content"><i class="fa fa-briefcase"></i></span>
        </li>
        <li><a href="#" class="tooltip tooltip-effect-5">Contact</a>
            <span class="tooltip-content"><i class="fa fa-envelope fa-fw"></i></span>
        </li>
    </ul>
</div>
</body>
</html>

css

/* Global */
html {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #47c9af;
    color: #74777b;
    font-weight: 300;
    font-size: 1.5em;
    font-family: "Microsoft YaHei",serif;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
a:link, a:visited, a:focus {
    text-decoration: none;
    outline: none;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:after, *:before {
    display: block;
    content: '';
}
*:after {
    clear: both;
}

/* Navigation */
.nav {
    width: 800px;
    height: 300px;
    margin: 200px auto;
}
.nav li {
    position: relative;
    display: inline-block;
    margin: 0 1em;
}
.tooltip {
    display: inline-block;
    font-weight: 700;
    color: rgba(0,0,0,.3);
    /*padding: .15em .25em;*/
}
.tooltip-content {
    position: absolute;
    z-index: 9999;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    left: 50%;
    margin-left: -40px;
    bottom: 100%;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 25px;
    color: #47c9af;
}
.tooltip-content::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    border: 7px solid transparent;
    border-top: 7px solid #ffffff;
    top: 78px;
    left: 50%;
    margin-left: -5px;
}

/* effects */
.tooltip-effect-1 .tooltip-content {
    transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);  /*3d开启移动端硬件加速*/
    transform-origin: center bottom;
}
.tooltip-effect-1 .tooltip-content i {
    transform: scale3d(0,0,1);
}