transform 遇上 position: fixed

楼主^#

更多发布于：2020-09-27 12:00

话不多说，直接上代码！！！

原代码是这样的

.down-icon {
    width: .27rem;
    height: 0.27rem;
    border-top: .02rem solid #6D3942;
    border-left: .02rem solid #6D3942;
    transform: rotate(45deg);
    position: fixed;
    left: 0;
    bottom: 0.4rem;
    left: 0;
    right: 0;
    margin: auto;
}

结果没有任何反应，其中的transform: rotate(45deg);并没有管用

解决办法：

将position: fixed;放在父元素内，添加一个子元素transform: rotate(45deg);放在子元素内

.down-icon {
    width: .27rem;
    height: 0.27rem;
    position: fixed;
    left: 0;
    bottom: 0.4rem;
    left: 0;
    right: 0;
    margin: auto;
    i{
      display: block;
      width: 100%;
      height: 100%;
      border-top: .02rem solid #6D3942;
      border-left: .02rem solid #6D3942;
      transform: rotate(45deg);
    }
}

此时效果可以实现

具体可以到这了解：https://www.cnblogs.com/xxhuan/p/11030244.html

[真知棒、于2020-09-30 10:02编辑了帖子]

喜欢0