From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

3D product box: Resize and position box

3D product box: Resize and position box - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

3D product box: Resize and position box

“

- [Chris] Hi, I'm Chris Converse and welcome to part three of this three-part series on creating a 3D product box. In this episode we'll scale and position our 3D box to fit within a webpage layout. And if you're following along from part two we're gonna continue working in the same exercise files. And so back in our text editor this is where we ended with part two, adding the graphics to the individual sides of our box. So now let's go back to the exercise files and let's open up box.html in our text editor. And now once you have this file open let's come down to the HTML. Let's first get rid of the text inside of the divs. So we'll get rid of top, front, and left. Save your HTML. In the browser you'll now see the artwork without those labels on top. Now let's come in here and let's select all of the divs inside of the product div. Come up to your edit menu and choose copy. Then let's go back to the exercise files and let's open up index.html in both your text editor and a web…

Contents