When you’re creating 2D and 3D transforms, or customizing animated state transitions, there’s a lot that goes into this. And this lesson is going to ramp up quickly. We’ll cover opacity, cursors, shadows, transitions between states, filters, and of course, the different kinds of transforms in 2D and 3D space.
Opacity. It makes things translucent. And if you have elements that overlap? Decreasing their opacity decreases their opacity. Lower opacity means you’ll see more behind the element.
That’s opacity. What about CURSORS?
[Grimur] Sometimes I’m a curser, but I hold back so I don’t sound like an a–
[McGuire] Ascertaining what the DEFAULT cursor behavior is for any element can be done by going into Preview. (Here we can test the default, automatic cursor behavior.) When we hover over a link? We get the pointer. When we hover over text, we get the text thing.
But what if we want to override that auto behavior? With any element selected, we can go to the cursor dropdown and select something else. When we go into Preview mode to check it out? We can move our cursor over that element, and the moment it’s inside the element’s boundary, there it is. New cursor.
Now. There is one cursor you should use with great restraint. We are, of course, referring to the None cursor, which looks like this. A better example is selecting our Body element. We’ll set the cursor in our cursor dropdown menu. We’ll set it...to none. Now? When someone moves their mouse anywhere inside the page?
[Grímur] Ahh, I can't even see my mouse. This is bulls—
[McGuire] Shadows can be applied to almost anything, so let’s move from Cursors to Box shadows. And these can add visual lift and contrast to an element...against whatever background you have behind it.
And box shadows apply to the element itself (the box; its boundary). So if you have a heading and you apply a box shadow? Maybe this...visual style...is your thing, no judgement. But notice how the shadow’s applied to the box itself and not each letter. (That’s what text shadows are for.)
But things like buttons or cards? We can add a box shadow to anything like this... But notice how we can toggle an inner shadow ...inside the boundary). Let’s switch it back.
We can tweak all our properties until we get our shadow looking the way we want. And something to keep in mind: it might be tempting (especially on a lighter background color) to set your shadow to a sort of gray color. But if you’re aiming for a versatile shadow that gives you flexibility down the road if you end up changing to a DIFFERENT background color (changing the color behind the button)? A pure black color with a lower opacity is an excellent way to achieve that look. And it’s consistent across different kinds of background colors.
Now. Here’s an important distinction between shadows and BORDERS.
You can actually style a shadow to LOOK like a border. You can remove the distance and you can remove the blur, and set the size to something like 1 pixel. And let’s make this shadow visible INSIDE the button.
Now. Why would we ever do this? Well, because borders can actually affect the dimensions of an element. And sometimes that’s not what we want. Box shadows are just an effect. Hence their inclusion in the Style panel under Effects. (You can use a box shadow to create a visual border.)
But over to a different example, here where we already have a box shadow...we’ll add a second shadow. Dual shadows.
Now. There might be some people thinking: “there’s no such thing as a second shadow. And dual shadows don’t exist.”
Well. Objectively, those people are wrong. Because they do exist. And we can add and style additional shadows (the second shadow can be decorated differently — entirely the way you want it to look). Two separate shadows.
And shadows become really interesting when you add states to them. Let’s look into that.
With our button selected, we can choose our states from the dropdown here, and go over to select Hover. (We’re now styling how the button looks on hover — when we HOVER over it.) And if we scroll down, we can see BOTH box shadows we added before. But here’s the key: if we want those box shadows to move, or blur more, or whatever (if we want these changes we’re making here to affect what the button does on hover)? Well, we’re in luck. (Since we’re styling on the hover state, all of these changes affect what the button looks like on hover.)
So. Let’s go into Preview mode, and we can see — the button is styled how we originally styled it, but when we hover? We’re now accessing the style for the hover state. (BUT...it’s a bit abrupt.)
How do we make it BETTER? Let’s transition into transitions. Now. Transitions let us interpolate between states (they’ll create a smooth transition between None and Hover...again, we can go into the dropdown and see that, by default, we’re styling None). And None is where we want to add our transitions. So if we go down to transitions, we can add one.
And here’s the big thing about transitions: we need to select the CSS property we want to transition. In this case, we affected our Box shadow, so let’s select Box shadow. And by default it’s 200 milliseconds (.2 seconds).
If we hover over the button on the CANVAS? We can see our transition in action. In fact, we can slow it down here (maybe we want half a second; 500 milliseconds). And maybe we want to change the easing curve on that transition.
By default, it’s ease. And, as we know from AP World History, easing can be expressed visually by comparing something with, say, “linear” motion (a direct path from Point A to Point B) to something that has easing. Notice how the one that’s easing starts out slower and ends slower, but accelerates towards the middle of the animation.
It’s the same here when we affect easing. We can select the option we want for our transition (we can tweak the easing curves if we’d like), and we can also test OUT that easing in a couple ways. We can hit the play button to see it graphed out...OR... we can hover over our button on the canvas.
What about transitioning other properties? Maybe we want to change (let’s go out of here and go back to our Hover state) — maybe on hover, we want to go down and make a change to the background color. (Let’s go in and change it so there’s a different background color on hover.)
And once we’ve done that (again, we’re styling in the Hover state), let’s switch back to None — because as we know, None is where we add our transitions between states. Again, if we hover over it now? The background color change is abrupt (it’s instantaneous). That’s because just like the box shadow, we need to animate that transition (we need to add a transition that affects the Background color). And it’s the same deal here. Once we select which property we’re aiming to transition? We can set our timing on it (the amount of time it’ll take to transition), and we can even go in and adjust the easing curve.
Once we’ve matched those properties? (By the way, yours don’t have to match.) This is a design decision more than it’s a development decision, so of course, do what you feel is best. Maybe 18. Thousand milliseconds. Is that too much time for a color transition? Let’s watch.
[Grímur] This is gripping.
Perfect. Now a transition works between all states. In fact, if we hover out, it’ll change back over that same 18 seconds.
[McGuire] While we’re waiting, now’s a great time to mention there are fourteen types of punctuation in the English language. Commas, colons, semi—
[Grímur] Semicolons, parentheses, period, question marks, exclamation marks, apostrophes, quotation marks, brackets, braces, dashes....
[McGuire] Well, that's 12 of them, but we're out of time. But that’s transitions. What about filters? Here’s a card design that’s just a Div block with a class applied (the class is Card, but the name doesn’t matter). What matters is each of these cards has the SAME class applied. So with any of them selected, we’re just going down and adding a filter. And we can see a bunch from the dropdown. Like blur, which blurs things. Like brightness, which makes things lighter (or darker). Like contrast...
It was quite apparent that we ignored the principle of show; don’t tell. It was a long droning on, and we realized that we could just show a single slide that demonstrates each filter simultaneously over 1 second.
For our example here, we’ll choose grayscale. And we want these to be 100% gray (we’re styling None, but we’ll change Hover in a second). And because the same class is applied to all of these, they’re all grayscale. Let’s head over to our Hover state, and on hover, we want the color to come back to our images here. So we just modify our Grayscale value (we just make it 0). What does that look like? Well, we’re styling on Hover, so let’s hit Escape (now we’re back to None). And it’s grayscale. Hover over any of these cards? Full color.
Now. Two questions here. First, can we transition this effect between None and Hover? Yes. We just go to transitions (add one to our card), and choose Filter. (This means we’re transitioning the Filter property.) And now when we hover? 200 millisecond transition.
The second question: what’s the difference between Grayscale and Saturation? When would we use one over another? Saturation goes in both directions. It can decrease color towards 0%, but it can also go way up and dramatically increase saturation in the other direction.
With grayscale? We have control over the first 100% only. And technically it’s inverted (because 0% saturation is the same as 100% grayscale).
But it’s important to remember: whatever filter we’re using, it affects the entire element (plus any children inside). In our case, since we've been styling this Div block (this card) and since the image is INSIDE, the image is ALSO greyscale. SHOWN another way, if we’ve put this button INSIDE the card? Not so colorful. Until we hover.
That’s filters. And now for the biggest and best part of this lesson: 2D and 3D transforms.
There’s a lot to cover here, but let’s start with some of the more unique principles of 2D and 3D on the web. In HTML, browsers interpret, of course, our x-axis from left to right, and our y-axis from top to bottom. But since this is all based on the industry standard box model, this is a LITTLE different than a traditional coordinate plane.
Because on the web, just like in math, things on the x-axis INCREASE in value as they move to the right, but, on the web, things along the Y-AXIS actually increase in value as they move down on the page. So everything is increasing (these values are pushing off from the top-left of the page).
And of course, we have our z-axis. The z-axis is our depth value. The greater the z-axis value, the closer something appears to the screen. Now. There’s a small asterisk on the screen. And we'll talk about why in a moment.
Because to demonstrate why, we need to get into transforms. With our card here selected, we can see we’re styling None — and let’s add our first transform. And before we get to Z, let’s affect X for left and right, and we can use Y for up and down — notice how these changes (even though the card is moving) — everything inside the card is moving with it. But notice how it’s NOT affecting the rest of the document (the other things on the page aren’t being pushed around). That’s because transforms (whether it’s moving, or rotating, or any transform) — transforms don’t mess with the document. They only affect the selected element and the element’s children.
You might also notice that each time we tab over (each time we switch from something like Rotate to Move), we lose the transform settings from other tabs. And that’s because transforms need to be stacked as separate properties (we can have a move AND a rotate), but we need to add the second property (add the second transform to do both at once). And we can see in the list: we have move and rotate.
Now. What about that asterisk from before? What happened to it?
Because on a second watch, it should become painfully apparent that we skipped past the z-axis when we covered moving things using transform. Again, this is our depth axis. So. What happens if we move along the z-axis for something like this card. Well, nothing happens. It does (the value is actually changing behind the scenes), but it’s not being reflected visually (let’s reset it for a second). And we have a different problem if we try and rotate again along the x- and y-axes. It’s...not exactly what we might expect in traditional 3D space (everything’s isometric — of course, isometric projections are totally valid, but it might not be the style we’re looking to achieve). Because in order to make ALL this happen, we need to add perspective.
Let’s expand our layout. A single section, now we have three cards. Each of them have the same exact class applied.
And we’ll cover two ways to add perspective to a layout like this. (We’ll cover both.)
And the first one goes like this: think of the section here as a sort of the “camera” (the lens through which we’re looking at the cards.) You can just select the section itself (we can see in the Navigator that these cards are inside the section — they’re CHILDREN of the section). And all you have to do to give an element a 3D effect (to make our cards 3D)? Is set perspective on the parent (the section). (All we have to do is set the Children perspective on the parent section itself). Now — notice how we’re changing Children perspective (NOT Self perspective). Let’s do 1000 pixels right now, but we’ll demonstrate what different values do here in just a moment.
First, now that the section has a Children perspective set, we can select any of the child elements, and actually manipulate stuff along the z-axis. (We can add a transform, and do something like moving along the z-axis...moving them closer or farther away.) But we can do more. Let’s switch over and work on rotating. Because now that we’ve added Children perspective to the Section, manipulating these values (transforming the children elements) lets us do stuff with these cards in 3D space (with realistic depth).
Put a different way? (Let’s demo this with a split screen here) on the top, this is what happened when we had before we set any perspective — before we set Children perspective on the card’s parent element. But on the bottom...this is what it looks like AFTER Children perspective has been set. Isometric effect on the left...more of a perspective projection on the right.
But notice something else: these cards? (With the rotation transform we’ve applied?) They’re not identical. And we’re not just talking about the things inside these cards — look at the actual angles (the edges are different on each card). That’s because you’re seeing the cards from the perspective of the section (like the section is a camera). As things get towards the edge, they’re warping more photorealistically (an effect often associated with a wide-angle lens on a camera).
In fact, we can experiment and go back to demo WHAT the Child perspective value actually changes. So back in our section, let’s go down and make some live adjustments to the Children perspective now that we’ve set up the transform on our cards. The higher the value? The flatter things look (like a camera being farther away from the subject — less exaggerated perspective). But the lower the value? This is like a camera being really close to the subject. The perspective is exaggerated and the effect is more dramatic.
But what if you want to go REALLY advanced? What if you want to change the origin of that children perspective? Maybe you don’t want the center of the section to feel like the center of the perspective? You can adjust that in the transform settings under Children perspective...and we can see that setting it to top left? Changes our perspective. Top? Top right? We can even manually type in values to change the position of our perspective origin (basically the center of the lens).
Again, we said we’d cover TWO ways to set perspective. Children perspective set on the Section is the FIRST way. What about the second way to set perspective?
Because if Children perspective can be set on something like a Section to turn it into camera effect...what do you do for self perspective?
[Grímur] I recently downloaded a meditation — like a — App Store?
[McGuire] Not now, Grimur. We’re working in 3D. SELF perspective is like turning each element ITSELF into a mini camera. Check this out: we’re going to remove (we’re completely resetting our transform properties on the Section so no perspective at all is set). In fact, notice how, right now, everything looks flatter and isometric again. But this time? We’ll select any card ITSELF. And on the CARD, we’ll go in and set our Self perspective. (Again, BEFORE, what we did was set CHILDREN perspective on the parent element — the section — but now we’re setting Self perspective on the element — the card class ITSELF). Same thing here.
And to really demo this, let’s go in and affect that rotation a bit more dramatically. What’s different here is this: this time, the angles are all the same. There’s no difference in the way the left card looks compared to the center card or the right card. In fact, the perspective is 100% identical — and it’s like there’s an individual camera pointed at EACH element (each card). Let’s do another comparison here to look at the difference. On the top, are three cards the FIRST way we did it (WITH Children perspective set on the SECTION); on the bottom, is the SECOND way (the same cards, but instead of Children perspective on the Section, they have Self perspective set on the cards themselves).
Two different ways of setting perspective, two different visual results. Is there a right way or wrong way? Vlad?
[Vlad] It’s really...a matter of perspective.
Thank you, Vlad. Now this is a lot. And the best way to learn here is to experiment. Because with 3D perspective, you can combine a lot of the things we’ve talked about this lesson so far.
In fact, in this DIFFERENT example here, we have four cards (again, they all have the same class applied to them), and the Section here is set to a Children perspective of 1000 pixels (a little more dramatic), and instead of styling None, let’s go in and affect our transforms on the Hover state. So...in hover, we can go down, add a transform, and do something straightforward here to show movement (to rotate things slightly).
But we can also take it one step further (actually, we’ll do two things to make this even MORE dramatic). For the first one, let’s go back to None (once we’ve finished styling the Hover state), and add a bit of a transition here. Again, with transitions, we want to select the specific property that has the style change (in this case, it’s Transform). And we’ll set our timing to something like 700 milliseconds, and we can go in and choose our easing curve (any of these will work, but let’s try out how things look). Not bad...if we test what things look like on hover.
But here’s the second thing we can do: let’s go in and select one of the CHILDREN of our cards. (We already know each CARD has the same class applied to the image inside.) So let’s select the IMAGE. And we could try moving the image independently. (We’re styling the image in None.) BUT, now that these things have perspective, we’re able to do additional transforms. So let’s move our image towards us (we’ll use the z-axis here — we’ll move the image closer). And what does that do? It creates enough separation that when we hover over the card, we can see that 3D parallax in motion (the image is a child of the card, so because it’s closer to us now, it rotates WITH the card and gives us an even greater sense of depth).
The possibilities here are limitless. But there’s a bit more to cover that can be applied to almost all of this — especially rotations.
Because (and we can access this part from the transform settings here...) — because when DEALING with rotations, making the back of an element visible just means that when you rotate it, the back of it is visible. If it’s hidden? The back is hidden.
And that leaves us with our last topic to cover as part of 2D and 3D transforms: origin. There are two schools of thought: first is what’s known as the Big Bang, which is a model that describes how the universe expa — you know what? This is the Wikipedia article on the origin of the universe.
Transform origin describes how an Autobot named Optimus Prime w— this is the origin STORY for the Transformers franchise.
Transform origin (this is the origin listed under Transform settings) describes where things are transformed FROM. That means if we set it to top-left? 0% from the left; 0% from the top? Any transforms we add to this element will revolve around THAT origin. Notice how rotating this shows the top-left as that sort of “anchor point.” That’s what we mean when we say “transform origin.”
And that’s a lot to remember — a lot to experiment with. So try it out — worst case scenario you make something so unbelievably destructive that you have to restore from backup. (That’s okay. We all do it. We’ve all been there.)
But before we wrap this lesson, let’s reinforce it and summarize what we’ve covered.
We talked about opacity, which didn’t take long at all. We talked about cursors and people who are cursers. We covered box shadows (and how we can stack them), transitions which can animate back and forth going to states like Hover. We covered filters and how you can use them WITH transitions to create visual effects that can rival such films as The Hurt Locker, Wonder Woman, and of course, Transformers. We discussed 2D and 3D transforms. (The ability to add things...like moves, scales, rotations, and skews)...we covered how we can set Children perspective on a parent element like a section so that the children of that section have a perspective projection that turns the section into a sort of camera...and of course, we briefly began to cover the origin of the universe itself. Before realizing, once again, that Stacy printed out an unrelated document from Wikipedia.
That’s an overview of effects in the Webflow Designer.