小程序 css :before里transform无效

Question

问题描述

在小程序中，给view 添加:before伪类样式，transform无效

问题出现的环境背景及自己尝试过哪些方法

已经参考链接描述将display改为inline-block，但还是无效

相关代码

.more-icon {
height: 1.06rem;
width: 1.06rem;
transform: rotate(45deg);
border: 0.1rem solid #979797;
border-left: 0;
border-bottom: 0;
display: inline-block;
}
.more-icon:before {
position: absolute;
content: '';
height: 1.06rem;
width: 1.06rem;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border: 0.1rem solid #979797;
border-left: 0;
border-bottom: 0;
margin: 0 0.25rem;
display: inline-block;
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

将transform: rotate(45deg);改为transform: translate3d(0, 0, 0);即可旋转
.more-icon {
height: 1.06rem;
width: 1.06rem;
transform: rotate(45deg);
border: 0.1rem solid #979797;
border-left: 0;
border-bottom: 0;
}
.more-icon:before {
position: absolute;
left: 0.1rem;
bottom: 0.3rem;
content: '';
height: 1.06rem;
width: 1.06rem;
transform: translate3d(0, 0, 0);
border: 0.1rem solid #979797;
border-left: 0;
border-bottom: 0;
margin: 0 0.25rem;
}