真知棒、
侠客
侠客
  • 最后登录2020-10-10
  • 发帖数18
  • 社区居民
阅读:1655回复:1

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编辑了帖子]
doubleyong
管理员
管理员
  • 最后登录2020-10-29
  • 发帖数914
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
沙发#
发布于:2020-09-28 09:18
这阅读量,666
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号