 Okay. So yes, my topic is less controversial. I'm going to talk about CSS 3D transforms for beginners. The reason I chose this topic was because I was working on a project which involved CSS 3D transforms, and it was a little bit weird for me. At first, it was a bit hard for me to get my mind on it. So that's why I chose this topic. Hopefully, it'll be of help of you guys. So first, there's many ways to render 3D graphs on the web. So of course, we have the good old days of flash, and we have Canvas and WebGL now with 3JS. There's an arrow here, but it's not really like we've moved on, but we also have WebVR and WebAR2 with React. Yes. But let's not forget CSS 3D transforms because this is, actually, we can do quite a lot with CSS 3D transforms. So some of you might be like this, like why would I want to learn 3D transforms? Like this was me a few years ago or last year. I have work to do. But I have some examples that is quite interesting. So yeah, let's make a CSS-only city. Oh, I hope this works. Oh, no, it doesn't. Okay, yeah. So this is all CSS. Sorry, it's white. And it's not really, really impressive, but really to be able to make this kind of thing with only CSS is really cool. And we're just like moving boxes as we used to in our normal. And also if you want to create cool hopper effect, so this is like one example from Code Pen. Yeah, it's like quite impressive, right? Like if you just go into a website and you see this, it's like, wow, this website is cool. This is like funky, but I like this one. I just put it in, even though it's not useful. And also there's another one. Yeah, I know we all love channel news Asia, right? So this is like really only CSS and it's like really cool. I mean, you're not going to put this into your website, but yeah, CSS 3D transforms can do a lot. And this one I brought up as a real life example. So yeah, can you see where the CSS 3D transforms is? It's working on the menu. Yeah, so it's kind of like interesting. It's like a global navigation at first. And then when you scroll down, it becomes the title. Yeah, so I thought this was quite impressive. It's kind of interesting. And then I was looking at these examples and I was thinking like, oh, it looks a bit difficult. But then I found out that actually in order to do CSS 3D transforms, you really only need to know three properties, which is transform that you might already be familiar with, perspective, and transform style. So only these three. So transform obviously it lets you rotate, scale, or translate an element. Perspective, it determines the distance between the z equals 0 plane and the user in order to give a 3D positioned element some perspective. Yes, I took this from the dictionary because I don't want to be wrong. But I'll try to explain it more easily in the next later on. And transform style, I'll take this from the dictionary to sets whether a children of an element are positioned in the 3D space or flattened in the plane of an element. So let me expand on each of them. So transform, you can use rotate, scale, or translate in the 3D space. In 2D, you can use skew too, but you can't use skew in 3D. So only rotate x, y, z, scale x, y, z, and translate x, y, z. And transform, there's a little bit of weirdness, I think, when you're writing it. So I wrote some tips, like three tips. So first, don't write multiple transforms. So if you want to translate x, translate y, and rotate, you might think of transform, translate x, 20 pixels, transform, translate y, 20 pixels, transform, rotate for degrees. But this doesn't work, because it only takes the last value, as CSS usually does. So you have to write it all in one line. So transform, translate x, 20 pixels, space, translate 120 pixels, space, rotate for degrees. And this gives you what you want. And also, order matters. So sometimes, so when transform happens, it starts from the beginning. So if you write rotate first and then translate z, it actually does that in order. And sometimes, it doesn't necessarily end up when it's the opposite. So for example, rotate 90 degrees and translate z minus 100 pixels doesn't necessarily equal translate z minus 100 pixels and rotate 90 degrees. So if you feel like something's going wrong with what you're seeing, like you're not getting what you expected, check your order. And also, multiple transforms are additions, not overrides. So if you write transform, translate x 100 pixels, and then another translate at x 100 pixels, it doesn't take the latter value, but it takes both of them and it adds it up. So just be careful of these three, because I feel like it's a bit weird at first. But yeah, just remember. So that's it for transform. And next perspective, so I feel like this is a bit hard, because usually you're used to writing 2D stuff. And perspective, in more easy words, it determines how far you are from your 3D object. So let me put a demo. So this has a value of perspective 400 pixels. And you can see it changes how you can see the cube, the depth of the cube. And when it's set as none, it basically means your face is right in front of the cube. So it doesn't look 3D at all, even though the cube itself is 3D. And one thing you need to keep in mind when using perspective is it's weird, because the less value you have, so the closer you are to the cube, the more 3D it becomes. And the further you are, so this is perspective 800 pixels. It means you're really far from the cube, which makes it less 3D, which is hard to get in mind first. But just remember, less is more, and more is less. And when you want to define your perspective, you can use two ways. You can write it in two ways. So you can either use the perspective property on the parent element, or you can use the transform property with the perspective value on a child element. And it usually does the same thing, but sometimes it does different things. So the blue box and the red box, they both have perspective, but they're using different properties. So the blue one uses perspective, and the red one uses transform. And so perspective, you're putting your perspective on the parent element. So this whole thing is perspective 400 pixels, whereas for the transform property, each one has a perspective of 400 pixels. So you can see the difference. It's kind of subtle, but you can see how this one, it's all in one perspective. Whereas for this one, you can see each one has its own, can you see it's going in? Each one has its own depth. So usually, people would like to use the perspective on this side. So usually, when you want to write CSS 3D transforms, make sure to use the perspective property. And also in line with perspective, there's another thing called perspective origin, which is you don't have to write it, but if you want to write it, go ahead. And this is where you want to position yourself from the element. So considering perspective to be this length, like how far you are from the element, then perspective origin is where you are. So let me go back to the demo just now. So if I put my perspective origin as 100%, I'm on the right side, I think, of this cube. And if I use perspective origin 0%, now I'm on the left side. So if you want to change these fancy stuff, use perspective origin. OK, oh, I skipped one slide. And lastly, transform style. So in definition, this sets whether children of an element are positioned in 3D space or flat space. So normally, web just renders flat space, right? So when you want to actually render 3D space, you have to explicitly tell the browser that I want to use 3D using transform style. And the values are transform style flat and transform style preserve 3D. So just use transform style preserve 3D, and you're done. And some of you might be thinking, OK, there's all these properties, but how do I actually use them? So I came up with a, I don't know if it's a useful example, but a card flip. I actually looked it up before coming, yay! So color of the month, orange-red. Yep, see, I didn't know how to say this. I was like, orange-red? But then I realized it's orange-red. So yeah, this is my example. And the markup is very simple. So you have a div class scene and a div class card and a div class card face, which marks up the both the faces of the cards. And then when you think unusual 2D, you feel like what is this scene markup thing doing here? It's like, what is this? But if you look at the CSS applied to it, so the width and height, you can just kind of ignore. It's actually setting the perspective. So when you want to start off a 3D project, make sure you create a scene, or it doesn't have to be a scene, but some kind of a container that provides perspective to the 3D project that you're going to do. And then next, we're going to look at the card part. It has width and height. Sorry, I kind of grayed out the position relative, but this is kind of important. So make sure you put a position relative to your card because whatever you put inside, you're going to want to absolutely position it. So make sure you put position relative. And if you want to add animation to it, you want to put transition. And also transform style preserve 3D. So use this onto the 3D element that you want to use. And the problem is, if you move this outside, for example, if you move this transform style to the scene or the perspective to the card, it doesn't work. So make sure you have the perspective at the outer most layer and transform style on your 3D object itself, or 3D element, sorry. Yep. And then lastly, if you look at the card face, yeah, we just want to put the two card faces on top of each other. So I'm just using position absolute height and width 100%. And yeah, this weird back face visibly hidden. This is here because when you're looking at the front, you don't want to see the back div, right? And when you're looking at the back div, you don't want to see the front div. So it hides the backside of the faces when they're faced away from the viewer. Yes, this is in my notes. Yeah, so that's what it does. And also for the back, you want to make sure that it's facing the back. Your div is facing the back. So I'm rotating it y degrees with 180 degrees. Yeah. And lastly, you just need to flip it. So in this case, I'm putting the hook on the scene because if I hover on the card, once your mouse cursor moves out from the card when it's flipping, it blinks. Like it does this weird blinking effect. So I think it's smarter to put it on the scene. Yeah. Okay, that's all. Thank you. My name is Ayaka. Yeah, and I'm a product designer. Yeah, nice to meet you.