Div pleine largeur avec perspective

Question

Je viens tout juste de commencer à jouer avec la perspective et les transformations 3D, et je comprends pourquoi mon div n'apparaît pas à 100% de largeur (même avec le CSS). Cependant, pour ce que j'essaie d'expérimenter, j'aimerais que le div s'étende sur toute la largeur du navigateur. J'utiliserais juste des pseudo-classes pour lui donner l'effet de perspective s'il n'y avait pas le texte à l'intérieur ayant besoin d'avoir la même perspective.

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; 
    } 

Si je mets la largeur à 156% comme je pense qu'il était, il étirées tout le chemin à travers, mais pas réactive. J'imagine qu'il devrait y avoir une sorte d'algorithme calc() ou JS/JQuery impliqué, mais je n'aurais aucune idée par où commencer.

Merci à l'avance Mark

Answer 1

De votre bout de code, une boîte ombre serait visuellement faire le travail,

box-shadow: 50vw 0 #1a1e1a 

mais qu'en un img en bg et le contenu avoir à tous les chemin vers le bord?

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