                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3實現(xiàn)漂亮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"?>
????<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);
}