translate3d(x,y,z)在页面布局中的使用

来源：互联网发布：软件架构怎么做编辑：程序博客网时间：2024/05/29 08:35

很快，又到了月底，最近遇到了一个问题，弄了蛮久，做下总结，温故知新！！！

这里写图片描述
这是饿了么的商家页面，底层的购物车页面(父层)是使用fixed布局的，固定在下方。购物车详情页(子层)默认显示，当点击父层的时候，子层就会展开。

-----------HTml代码<body>  <div class="shopCart">    <div class="content">我是购物车层</div>    <div class="detail" style="display:none">我是购物车详情页（弹出层）      1111111111111111111111111      1111111111111111111111111      1111111111111111111111111      我是购物车详情页（弹出层）</div>  </div></body>

---------------样式代码.shopCart{position: fixed;      bottom:0;      left: 0;      width:100%;      height:50px;      background: #000;    }    .content {      color: #fff;    }    .detail {      position: absolute;      top:0;      left:0;      width:120px;      color: #ff0b20;      /*transform: translate3d(0,-100%,0);*/   //后续添加    }  </style>

--------------js代码<script>    window.onload = function(){      var shopcart = document.querySelector('.shopCart');      var detail = document.querySelector('.detail');      shopcart.onclick = function(){        detail.style.display='block';      }    }

1.在没有添加 transform: translate3d(0,-100%,0);的时候，效果如下，子层是以父层来定位的，也只能在父层内部显示。
2.添加了transform: translate3d(0,-100%,0);的时候，效果如下：子层就会超出父层区域
3.注意：(1)transform: translate3d(0,-100%,0);中的-100%，是为了让子元素以自身内容，往上撑开自己的文本内容。

好了，就这么多了，希望对小伙伴们有用！！2017.10.31

阅读全文

0 0