3D label transform work

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>

53

i have screen shot it.

1 Like

I see an error, you can’t comment in css with //. There’s only multiline comments, so try /* comments */. I don’t see the problem in the code other than that, is there a demo somewhere so I can debug it (with devtools, it won’t change the code)?

there’s no error in this code. It works well. Just the task I was given sounds more of a job to work in a 3D studio program than using CSS. I was hoping what I just explained and described what my client wants me to do creating a 3D drinking can or bottle might help to picture the work.

Yes, that sounds good. You can do this with CSS animations and transform: rotateY() but is there a demo? Then I can temporarily add the code (after refresh it’ll be gone) and then I’ll post the code here. Or do you mean just the 3d bottles? That can be done with something like Three.js.

see if this link work. but yeah three.js looks the like the one. have you ever used it before?

https://codepen.io/Rosstopherrr/project/editor/AnqjGp

No, I haven’t. Just heard of it for making 3D objects. Good job on that 3d rotate, it looks cool!

The official website is threejs.org. It has tons of features, but it shouldn’t be too complex to use.