css3中怎样让父元素的2d变换（如scale）不影响子元素和背景图片？

问题描述

问 题

如题：css3中怎样让父元素的2d变换（如scale）不影响子元素和背景图片？

解决方案

子元素反向操作，以旋转为例

  <div class="demo">
    <div class="child"></div>
  </div>

  .demo{
    width: 400px;
    height: 200px;
    background-color: #1abc9c;
    transform: rotate(30deg);
  }
  .child{
    width: 100px;
    height: 100px;
    background-color: #f55;
    transform: rotate(-30deg);
  }

scale直接写css反向操作就比较恶心了。。比如 父元素scale(0.9)，就把子元素缩小到了90%，子元素要复原需要设置sacle(1/0.9)，这样css原生是不支持的，只能写成scale(1.1111111)- -可以用sass/less或者js设置

这篇关于css3中怎样让父元素的2d变换（如scale）不影响子元素和背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！