<分区>
<分区>
出于某种原因，我无法让这个使用原点和伪元素的简单 css 动画起作用，文本应该在其自己的中心翻转。
看一下代码:
.flip{
border: none;
background-color:none;
color: black;
padding: 5px 10px;
font-size: 18px;
border-radius: 4px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
transform-style: preserve-3d;
}
flip:after {
top: -100%;
left: 0px;
width: 100%;
position: absolute;
background: none;
border-radius: 4px;
content: 'flipped';
transform-origin: left bottom;
transform: rotateX(90deg);
}
flip:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}<a class="flip" href="">flip</a>最佳答案
你少了一个“.”在 css 中的类名之前
关于html - 悬停动画文本翻转上的 CSS 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50708875/