So I am helping out a guy who has a site, running an energy drinks business. One of the tasks he has set me to do was the drinks displaying on the site to be like a 3D object, so when the cursor hovers the product it will spin around like a 3D object (the user will see the label/can from the front going around from the side, back of the label/can, side and to the front again). Now, this sounded challenging but I gave it ago. The only way I was able to do this was to transform the front image to the back with a transform-style of preserve-3d and translate by degrees to give it a really cool spinning effect. (I will show the code below). Anyway, I sent him a video of my work and he wanted me to make the labels he has sent me via email, turn them into cans or bottles to make it more realistic… I just want to know is this possible to do? I mean to make two background images to spin around and the text to hover to give it a really cool 3D was hard but to have four images to spin and to make it look like a can/ bottle just seems impossible to do in CSS. Is this sort of work should be done in a studio? Taking pictures all around the product and to be created by a 3D studio program?? Let me know what you think about this task.
:root {
–level-one: translateZ(3rem);
–level-two: translateZ(6rem);
–level-three: translateZ(9rem);
–fw-normal: 400;
–fw-bold: 700;
–clr: #b7c9e5;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
body {
height: 100vh;
display: grid;
place-items: center;
font-family: ‘Oswald’, sans-serif;
}
.card {
width: 400px;
}
.card__content {
text-align: center;
position: relative;
padding: 15em 5em;
transition: transform 3s;
// background: pink;
transform-style: preserve-3d;
}
.card:hover .card__content {
transform: rotateY(.5turn);
}
.card__front,
.card__back {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 5em 3em;
backface-visibility: hidden;
transform-style: preserve-3d;
display: grid;
align-content: center;
}
.card__front {
background-color: var(–clr);
background-image: url(amorpure.png);
background-size: cover;
background-blend-mode: overlay;
color: #333;
}
.card__front::before {
content: ‘’;
position: absolute;
–spacer: 1em;
top: var(–spacer);
bottom: var(–spacer);
left: var(–spacer);
right: var(–spacer);
border: 3px solid currentColor;
transform: var(–level-one);
}
.card__title {
font-size: 3.5rem;
transform: var(–level-three);
order: 2;
text-transform: uppercase;
}
.card__subtitle {
transform: var(–level-two);
text-transform: uppercase;
letter-spacing: 4px;
font-size: .75rem;
font-weight: var(–fw-bold);
opacity: .7;
}
.card__body {
transform: var(–level-two);
font-weight: var(fw-normal);
font-size: 1.5rem;
line-height: 1.6;
}
.card__back {
transform: rotateY(.5turn);
color: var(–clr);
background: #333;
}
<div class="card">
<div class="card__content">
<div class="card__front">
<h3 class="card__title">Amorpure</h3>
<p class="card__subtitle">Beverages</p>
</div>
<div class="card__back">
<p class="card__body">Amor’s universal meaning (the Latin name of the Roman God of Love) is the platform for our global brand commitment to bring both the product family and the brand ethos to every continent.</p>
</div>
</div>
</div>