由于某些原因,我不能让这个使用原点和伪元素的简单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>
发布于 2018-06-06 05:05:33
你漏掉了一个".“在css中的类名之前
https://stackoverflow.com/questions/50708875
复制相似问题