html - 文本随变换增长而移动

Question

我有两件事想要解决。

1. 当悬停在链接上时移动的文本。
2. (较小)span 元素不相等(或者四分之一圆不相等，但这应该是不可能的，因为 width 和 height 匹配。)

可以通过给链接设置position:absolute来解决第一个问题，但这不是一个选项。该组件在 Flexbox 中使用，absolute 将杀死它。

body{
            margin: 0;
        }
p{
  position: relative;
}
a{
            transition: all .2s ease-in-out;
            display:block;
            box-sizing: border-box;
            /* position: absolute; */
            font: 18px Monaco, MonoSpace;
            color: #FFF;
        }
        a:hover{
            transform: scale(1.1);
        }

        a#top-left-circle{
            width: 90px;
            height: 90px;
            background: #006699;
            border-radius: 0 0 90px 0;
            -webkit-border-radius: 0 0 90px 0;
            border: 2px dashed #fff;
            box-shadow: -1px -1px 3px 5px rgba(0, 102, 153, 0.7), 2px 2px 6px 4px rgba(10, 10, 0, 0.5);


        }
        span {
            font: 14px Monaco, MonoSpace;
            line-height: 150px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: top center;
        }
.char1 { transform: rotate(-15deg); }
        .char2 { transform: rotate(-30deg); }
        .char3 { transform: rotate(-45deg); }
        .char4 { transform: rotate(-60deg); }
        .char5 { transform: rotate(-75deg); }

<div>
    <a href="#skills" id="top-left-circle" class="panel" aria-label="Hello">
        <span class="char1" aria-hidden="true">H</span>
        <span class="char2" aria-hidden="true">H</span>
        <span class="char3" aria-hidden="true">H</span>
        <span class="char4" aria-hidden="true">H</span>
        <span class="char5" aria-hidden="true">H</span>
    </a>
</div>

Answer 1

简单:添加到您的a元素

transform: translateZ(0);

为了告诉他:

"hey bro, prepare to get enhancendly transformed!"

因此，当您在 :hover 上转换它时 - 它会响应您

"I knew it hahaaaaa!"

jsBin demo

Here's a demo on how to radially rotate characters in a circle