Narration from the video tutorial:
We've all seen 'em, those 3D isometric phone mockups used to feature UI designs. I personally love them, so I thought it'd be cool to show you all how I made this truly 3D version, fully equipped with animation and snazzy moving parts that can be embedded on your site, perhaps in a hero section or a case study.
Now, the weapons of choice for this tutorial are Spline 3D, HTML & CSS and that's it my fine internet friends.. Let's get started!
We're going to get started here in Spline3D, which is a freemium tool that you can use to create cool 3D stuff for websites and apps.
The first thing we'll do is change the background color to a light blue, and remove the grid. After that, let's click the "Isometric" button at the bottom, and rotate the square plane by 90 degrees (hold shift to make that easier).
Next, give it a size of 253 by 538, which happens to be the dimensions of the phone layout we're going to import shortly..
Also give it a corner radius of 23, an extrusion of 9, and a color of 6767E5.
Take our layer, hit CTRL-D to duplicate it and move it up on the Z axis. This layer will hold our layout image.
With that new layer selected, change color to image, and choose the image from the project files for this tutorial.
Now, duplicate that layer, move it, change the Y axis value to 122, and choose the 2nd project file for its image.
Next up, duplicate that layer, and now we're going to embark on some glassmorphism.. hang with me, because this one's a wild ride.. actually, nevermind, it's not..
Change image back to color, make it white, and add a new glass material.. Move it on top of the color material..
Now, duplicate those suckers and just move them all over the place, in a seemingly nonsensical manner.. Remember folks, this is design, you can be creative, it's true..
Let's take each of those elements we created, and make them animate up and down. Just add a state on each one and move it up on the Z axis.. Then, add an event, and choose specify the following settings -- then, click play to watch that baby float.
Now, select all of the other elements, and repeat that process of creating states, moving them up slightly, and adding events.
By the end of it, your project should now look like this:
Now, one last thing here in Spline.. Take all of the elements (except not those lights, don't touch those lights) -- and hit CTRL-G to group them. Now, they're all one big happy family.
Create 2 new states. For the middle state, rotate it around and move it up. Then, just as we did before, create an event animation -- click play, and wala, boy that looks good.
If you really want to make this sucker pop, add some point lights. But you will have to select the other purple shapes and change their material type to physical for the light to affect them.
Finally, we're now ready to export this beautiful piece of work.. Match the settings here, and copy the embed code.
Now for the rest of this tutorial it's just HTML and CSS. It's really freaking simple, so I'm going to pass through it fairly quickly for 2 reasons.. First, the codepen is in the description and you can see the html and css for yourself, and second, I have better things to do.. like go play with my snakes.. Seriously, I have large snakes and I like to play with them.. Check out my other youtube channel, it's all there, seriously..
Anyhow, here's the final HTML.. we paste in the embed code from Spline, and make sure to remove the width attribute from that code.
For the CSS, we're going to just paste in a few rulesets because it's all relatively quite simple..
First we have the body ruleset, nothing special there..
The header ruleset where we move stuff around
Our H1 and Paragraph, we're going to add an animation here in a second on both of these..
Our section element which is the parent of our iframe embed from splice..
The iframe itself and the keyframe animation..
After all of that, we've now reached the end stage.. would ya look at that.. so good, so good..