CSS 旋转重置

Question

我目前正在制作一个带有图标的圆形菜单，当您将鼠标悬停在某个区域时会弹出图标。

这部分工作正常，但是，当我将鼠标悬停在上述图标之一上时尝试在该区域的中心显示文本时出现问题。文本使用图标旋转和平移。

这是(相关部分)代码:

HTML

    <div class="holder">
    <ul class="icons">
    <li class="icon1"><a href="https://www.google.com"><img src="./icons/block32.png" alt=""></a>
    <div class='tooltip'><span>This is a dummy text</span></div>
    </li>
    </ul>

CSS

    .holder {
    position:relative; 
    margin:auto;
    float: left;
    }
    .holder a {
    position:absolute;
    }
    ul.icons {margin:100px; list-style:none; width:0px; height:50px; position:absolute;
    left: 8px;
    border:160px solid transparent;
    -webkit-border-radius: 200px;
    border-radius: 200px; 
    }
    .tooltip {
    display: none;  
    }
    ul.icons > li:hover .tooltip{
    display: block;
    }

Answer 1

使用变换原点移动元素的原点。

示例使用将是:

    -webkit-transform: rotate(60deg);
    -webkit-transform-origin: 0 6em;

demo

MDN has a great page on the subject