CSS 3D Website Mockups in Divi

Oct 18, 2018

3D mockups are a great way to show off your web design work, and also a lot easier to make than you might think!

There are a couple different ways you can achieve this look:

1. Photo editing software (e.g. Photoshop)
2. CSS

The problem with the first method is 1) you need the software… 2) if you’d like to change the image in the future you need to go into photoshop, create a new image, export it, upload it to your website. This can be time consuming if you have a lot of images.

Personally I prefer to use CSS. This way if you have multiple images, you just need to code it once then use the same code each time you want to use the effect.

In this tutorial I’ll show you step-by-step how to do this.

Checkout the demo here →

Section 1

How to take a full page screenshot of a website

There are many different ways to get a full page screenshot of a website. Here are two I like to use:

1. If you’re using Chrome, checkout the “Full Page Screen Shot” extension. If you use this method, I’d recommend turning off any animations/parallax before using it, as it can mess with the screenshot

2. If you’re using Firefox, all you need to do is right-click, then at the bottom click “Take A Screenshot”. That’s it!

After you’ve taken the screenshot, make sure to trim the image down to the height you’d like, then re-size and compress it.

Section 2

Creating a 3D mockup in Divi

For this tutorial I’m going to be using the Visual Builder, as it seems that’s where the Divi team is now focusing their development.

Step 1: Create a new page, and add in a row. For this example, I’m using a 2/3 + 1/3 row.

Step 2: Add an image module to the 1/3 column.

Step 3: Add the screenshot we downloaded in section 1.

Step 4: In the “Advanced” tab of the image module, add the class “perspective-mockup”.

Step 5: Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):

.perspective-mockup img {
transform: rotateY(-10deg);
box-shadow: 10px 40px 50px -35px rgba(0,0,0, 0.5);
}

.perspective-mockup {
perspective: 200px;
}

@media only screen and (min-width: 367px) {
.perspective-mockup img {
max-width: 300px;
}
}

Section 3

How to customise it

If you like the style I’ve used, and you’re using an image with similar dimensions you can skip this part. However if you’d like to customise this further the parts you’ll need to play around with are:

1. The number of deg rotation on the Y axis in this part of the code (Hint: having a negative number pushes the left-side back, and having a positive number pushes the right-side back):

.perspective-mockup img {
transform: rotateY(-10deg);
box-shadow: 10px 40px 50px -35px rgba(0,0,0, 0.5);
}

2. The length of perspective in this part (Hint: the higher the number, the further away the object is, so the more subtle the rotation will be):

.perspective-mockup {
perspective: 200px;
}

3. If you’d like to increase the size, change the max-width in this part:

@media only screen and (min-width: 367px) {
.perspective-mockup img {
max-width: 300px;
}
}

I’d suggest doing it live in inspect element so you can see what happens when you make each of the changes.

To learn more about the rotateY CSS transformation, checkout this article.

To learn more about CSS perspective, checkout this article.

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: hello@andyhooke.co.uk

Related posts

Change image on hover in Divi with CSS

Having an image which changes on hover is a cool effect, but unfortunately it's not a native feature of Divi. Luckily though with a little bit of CSS it's an easy effect to build yourself. In part 1 of this tutorial I'll walk you through step-by-step on how to create...

3 Divi blurb hover effects (CSS)

Now Divi has the option of turning any module into a link, I often find myself making sections with blurbs which are linked to other areas of the website. The only issue though is it’s not that obvious these blurbs are links, as the only thing to show they’re...

How to change the sub menu font size in Divi

Changing the font size of the header menu in Divi is simple to do using the Theme Customiser. However, it only lets you choose the font size for the main links, not the sub-menu that drops down when grouping menu items. Here's a simple CSS fix that will let you change...