为什么我的气泡根本不旋转？
浏览器是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);
}
