<div class="container">
<div class="grid">
<div class="text-component">
<h1>3D Perspective</h1>
<p>Learn how to create a 3D space in CSS.</p>
</div>
<figure class="td-figure">
<img src="https://images.unsplash.com/photo-1603695454344-12df53ab0c11?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Image description">
</figure>
</div>
</div>
/* --------------------------------
š” 3D Perspective in CSS
š https://codyhouse.co/nuggets/3d-perspective
-------------------------------- */
.td-figure {
perspective: 1500px;
}
.td-figure img {
transform: rotateX(10deg) rotateY(-18deg) rotateZ(3deg);
border-radius: 0.375em;
box-shadow: 2px 10px 30px hsla(0, 0%, 0%, 0.25);
transition: .3s;
}
.td-figure:hover img {
transform: rotate(0);
}
/* demo stuff */
body {
padding: 4rem 0;
}
.container {
width: calc(100% - 3rem);
margin-left: auto;
margin-right: auto;
max-width: 80rem;
}
.grid {
display: grid;
gap: 2rem;
align-items: center;
}
.text-component {
text-align: center;
}
.text-component h1 {
margin-bottom: 0.75rem;
}
@media (min-width: 64rem) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.text-component {
text-align: left;
}
}
This Pen doesn't use any external JavaScript resources.