Question

我最近刚开始玩透视和3D变换，并理解为什么我的div没有以100％的宽度显示（即使它在CSS中设置）。但是，对于我想要试验的内容，我希望div能够相应地延伸到浏览器的整个宽度。如果不需要具有相同透视图的文本，我只会使用伪类来赋予它透视效果。

http://codepen.io/hiremarklittle/pen/OMBQBJ?editors=1100

  html, body {
    padding: 0;
    margin: 0;
    font-family: Helvetica;
    font-size: 24px;
    color: #777;
    }

  article {
    -webkit-perspective-origin: 85% -100%;
            perspective-origin: 85% -100%;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective: 300px;
            perspective: 300px;
    width: 100%;
  }

  div {
    background: #1a1e1a;
    display: block;
    position: relative;
    height: 100px;
    width: 100%;
    line-height: 100px;
    text-align: left;
    margin: 100px auto 0;
    -webkit-transform-origin: 80px 30px;
            transform-origin: 80px 30px;
    -webkit-transform: rotateY(20deg) translateX(37px);
            transform: rotateY(20deg) translateX(37px);
    -webkit-backface-visibility: hidden;
    outline: 3px solid transparent;
  }

如果我将宽度设置为156％，我认为它是，它一直延伸，但没有响应。我想象必须有某种calc（）算法或JS / JQuery，但我不知道从哪里开始。

提前致谢标记

Answer 1

从你的代码中，一个盒子阴影可以直观地完成工作，

box-shadow:  50vw 0 #1a1e1a

但是在bg中有一个img并且有内容可以一直走到边缘呢？

http://codepen.io/anon/pen/EPdpXG?editors=0100

带有透视的全角div

1 个答案: