<div class="in-space">
<h1>This is an Awesome 3D div</h1>
</div>
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
background: #f5f5f5;
perspective: 400px;
}
.in-space {
align-self: center;
background: #fff;
height: 200px;
width: 200px;
padding: 20px;
box-shadow: -18px 17px 8px #ccc;
transform: rotateY(40deg);
border-radius: 2px;
border: 1px solid #eee;
border-left: none;
border-top: none;
}
h1 {
font-family: arial;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.