Recently, I've been experimenting with perspective and 3D transformations, and I've realized why my div isn't displaying at full width despite setting it in the CSS. However, I'm interested in creating a responsive layout where the div stretches across the entire width of the browser. Using pseudo-classes for the perspective effect would work, but the text inside also needs to have the same perspective.
Click here to view the code on CodePen
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;
}
I tried setting the width to around 156%, which made it stretch all the way across, but it wasn't responsive. I believe we might need to use the calc() function or involve some JS/JQuery, but I'm not sure where to start.
Thank you, Mark