如何在Firefox中垂直居中变换旋转中的伪元素
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Firefox中垂直居中变换旋转中的伪元素相关的知识,希望对你有一定的参考价值。
我在如何使变换期间让X保持在中间时遇到了麻烦。看起来这个问题只发生在Chrome和FF之间的Firefox浏览器中。
我正在使用FF Quantum 58.0.2并且X移动到顶部,在Chrome中我没有任何问题。
我试图在伪元素选择器中添加top: 50%;
,但在旋转期间,X将几个像素移动到底部。有没有其他方法可以在Firefox中实现这一点,就像在Chrome中一样?
.close >.x-button{
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
position: absolute;
content: '';
width: 100%;
height: 0.08em;
}
.close:hover >.x-button{
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
background-color: #FD0030;
}
.close >.x-button::before{
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close >.x-button::after{
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<button class="close">
<span class="x-button"></span>
</button>
答案
您可以像使用任何位置绝对元素一样垂直居中前后
给它一个top: 50%
和transform: translateY(-50%)
我在Mac FF上验证了这一点
.close >.x-button{
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
position: absolute;
content: '';
width: 100%;
height: 0.08em;
top: 50%;
}
.close:hover >.x-button{
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
background-color: #FD0030;
}
.close >.x-button::before{
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translateY(-50%);
}
.close >.x-button::after{
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translateY(-50%);
}
<button class="close">
<span class="x-button"></span>
</button>
另一答案
你也可以添加bottom: 0.20em
.close >.x-button::before,
.close >.x-button::after
在所有浏览器上修复它。
为什么qazxsw poi? qazxsw poi是图标尺寸的一半,qazxsw poi是顶部和底部边缘的一半。
Firefox:.20em
片段:
.25em
.5em
以上是关于如何在Firefox中垂直居中变换旋转中的伪元素的主要内容,如果未能解决你的问题,请参考以下文章