 Thanks for coming here. I will get into the talk in just a second, but I'll introduce myself first My name is Chris Ruppel. I work at four kitchens Who is one of your awesome sponsors for HTML5 TX? We're a shop here in Austin that does a lot of Drupal development, but a lot of front-end and mobile work, too And I am a front-end developer there and that's my my thing so today We're going to talk about CSS 3d transforms. Is everyone at least familiar or Recognizes that word. Is this something you've seen before? No one great. So that's awesome So the title of this talk is You know what hold on I'm gonna plug in because This presentation destroys your computer's battery And we don't want that to happen in the middle bingo. All right, so this is called Unfolding the box model and we're going to be exploring CSS 3d transforms and So obviously you need a web browser these slides are on github by the way I'll put the link up afterwards and everything is an example. I coded the entire thing So everything that you're looking at you can go inspect the source code of this isn't keynote or reveal JS or anything like that It's just all transforms. So the entire thing is built using the technology. We're discussing so without further ado We've all kind of Been doing this a while. I assume or even if you're new You have probably figured out that web design is the ever-evolving art of Making your Putting little boxes all over a screen, right? So here's our friend the DOM element And the DOM element is created, you know with an HTML tag in the document But when the browser parses at HTML they become DOM elements in your web browser and so like I said If you build web pages or build websites or build things on mobile phones You're constantly trying to improve the art of placing these little squares all over your page and You know, we've had plugins to do some of this work for us if you want to do animation or something like that in the past You relied on flash or another Proprietary thing, but now we've got awesome web APIs that do a lot of this stuff for us But in Pastimes when we wanted to organize these squares on the web page we had very limited options Of course, you have the box model itself The the margin the border and the padding of an element and we're not going to talk a whole lot about those today But they do interact with these transforms regardless so you do have to take them into consideration But the main two ways that we would put things all over web pages were floats And so you can see this is floated right compared to all the content on the page Or it's floated left and now it's floated right So you had floats and you could go back and forth, but that's not You know, that's not too many options If you want to make a float that isn't a square you were basically out of luck where you had to make several elements that would Simulate that shape for you But then we had positioning also So you've got positioning too and you can once you've floated something or put it on the page You can move it up you can move it down You can move it left and you you know, you can move it right too. So you've got up down left right Or X and Y if you will But now we've got a new feature of CSS that unlocks a whole new dimension here I can't believe I did this hold on one second We are gonna I'm gonna pause here and I'm gonna ask you guys Who would like a small prop? So this is like totally cheesy, but I thought it'd be fun to do anywhere So I'll give everyone just one more second to put those glasses on All right, so hopefully this is gonna work well with this projector. I didn't like color tested or anything But if you've got the glasses on You should actually be able to see like a level of dimension to this stuff so Yeah, there's not a lot of trick it looks exactly like you know some retro 3d thing it's got red on one side and blue on the other and You know your glasses Basically hide one color from one eye and hide it from the other eye and this is not news You know, we all know how 3d glasses work But the important thing is that that 3d information is now embedded in this web browser because I'm using this 3d transform So those things wouldn't have worked with skew or anything like that beforehand, but these glasses actually reveal that the Information is not it doesn't just look 3d in the browser It really is 3d and so we've got a 3d engine built into web browsers now and more of them will add them In the future So I've got one more example. You can keep those glasses on for just one second here I'm going to go through the basics of 3d transforms. They let you do two major things One is translation and if you're used to these are 3d terms, but they're also the CSS property So it kind of helps translation in the x-axis moves you left and right Translation in the y-axis moves you up and down and Translation in the z-axis moves you back and forth if you've got those glasses you should be able to see it popping out at you So that's pretty cool, right? Now there's no more demos for now But at the end we've got demos with the glasses and I would not recommend keeping them on because they like hurt my head after a while When I was debugging this I had them on for a long time So then you can also rotate things though with the with the transforms So you can rotate things in the x-axis and that looks a novel to us, right? That that's like 3d motion in the browser. That's not normal You can do it in the y-axis as well And then you can rotate on z which actually looks fairly mundane So if I back through these again, I'm going to go back x and y when you're translating Look very normal and mundane. This is what we've always been doing the z-axis is what was added Which is why it looks so novel, but when you are rotating Rotation along the x and y-axis is what we are gaining in the web browser where we could already rotate things in the z-axis before So those are the three axes of motion That we as three-dimensional beings are used to and that's what you can do in CSS and When you put a couple settings on to the container element that is containing these transformed items you can make these Elements jump out of flatland. So we have a cube here. I'm going to get to this, but that is actually six-sided cube that I made in CSS Transform style is the first property that I want to point out this one just tells the browser. Hey Set me up a 3d environment And you can have as many of these on the web pages you want Memory limiting Or permitting rather Now the second one is perspective So does everyone know like when you're when you're drawing something and everything like they call it a vanishing point Like everything goes towards a particular spot So that actually happens in the web browser too And when you change the perspective value you can set how worked you want your transforms to be so right now I've got a transform or the perspective value is going from about 100 pixels to 3,000 pixels and the web standard says that you should specify perspective in pixels as if it is a distance away from the The front of your web page, which is a really abstract and weird thing to try and imagine but This is kind of like new territory for the web browser. So that's okay But you can see here that there are many different options It kind of looks like that that old Hitchcock move where like he zoomed zoomed out while moving towards the camera so you can There's a wide range of motion here available and then just I've found that like a thousand pixels is normally like what you kind of want it to look like And then there's perspective origin as well, so this cube is not transforming at all I'm not rotating it or moving it. What I'm doing is I'm moving the vanishing point So you know like if it's it's it's kind of like an isometric drawing where it can either fade to the left Or the right and you can pick a 3d point where everything is vanishing to Using the perspective origin and it's just like a coordinate system So all three of these go on the container element Does anybody have any questions about that because I know it's like a brain full like Awesome then I'm gonna be expecting some great stuff from all of you soon So now we've got another cube here and I'm going to put Properties on the actual cube itself now So we looked at translate earlier If anyone is familiar with any 3d modeling or rendering systems the the red green and blue represent red x y and z respectively and When you're moving something in a 3d system you would traditionally pull on these handles to move it in one axis and so Basically those are the three directions that you can move it You've also got rotation so these might kind of look familiar to These aren't actual handles, but these are the three axes upon which the cube can rotate And finally I've got a weird one here. It's a back face visibility Polygons by tradition in computer graphics are one-sided so it is a it is basically a flat Surface with a front face and it does not exist when it turns around and looks away from you basically So you can see the back of this guy because I've made back face visibility be on by default But now I'm going to change it to hidden And it disappears when it rotates It's very hard to like I Don't know wrap my head around sometimes because I'm like oh where did my thing go But I'd like turned it around 180 degrees and I couldn't find it So I'm going to turn now this is a cube The back faces are still hidden Count the number of sides on this cube. You can only see two at a time That's not because these sides of this cube are opaque. It's because you can't see the other faces when they're behind it Now I'm going to add in the other faces of the cube now Now you can see them when they're not facing you the top and bottom count because they're facing up and down Conveniently facing away from the camera, which is in between the two But if I move this cube, you know, I'm not even going to do that because of this projector but if you go get these slides you can mess with these values live and You can see that the the faces are all there basically even even Though you can't see them in some modes so those that's those three and Those are basically the only three properties that you need to put on an element in order to control the 3d transforms so a really awesome thing about Transforms is just like all other CSS properties. They're inherited by children So this lends a very real-world aspect to the transforms if you set your markup up correctly So you can think of them a lot like paper folds I've just got a bunch of spans in this sentence, but it allows me to kind of like bend and shake these words This is like the most basic example, so Take this for example instead, you know, we've all like made a cube out of paper, right? So you could do the same thing with dibs whoops So this cube is just sitting there But these are actually attached and their transform origins are set up such that they bend at the like Spot that they would bend as a piece of paper So there's no magic here going on. This is just me Setting up a few transform origins and and then rotating all this stuff 90 degrees like you would in real life The transforms are as simple as you imagine them to be when using paper You can make cooler things than like paper though So here's a good example, which is Definitely skewed due to the resolution of the monitor one side effect of me not ever checking this at a lower resolution is that the container for some of these transforms is is a the slide the dimensions of the slide that I'm on and because You position things within like this 3d environment basically When you change the resolution of your screen if you don't use ems or if you've used pixel based Transforms in some cases like someone who's presenting this presentation has Then it can not scale up and down with the font size However, I did do a lot of this in ems just because I was trying to be a hipster But now I actually had to bump my font size down like two notches just to give the presentation So I'm very glad I did Because we did be having a presentation not using these slides that I worked on for a long time So here's a slinky It actually is very very easy to set up This was one of the first things that I ever made with 3d transforms And this is just a bunch of divs like nested within each other if you actually Forget it, but it's like 50 divs all like right in a row and all they all they have is like I wrote one CSS rule that says If there is a segment inside a segment rotate it five degrees and that produces this So it's really like not rocket science And you can do other things just kind of you know rotate it more if you want Or you can make other things that require like nested transforms Like a solar system So this only needs one div per celestial body and that's awesome That planet would be burned to a crisp But that's because Again because I changed the font size on this thing. So yeah, that moon just got eaten by the Sun But you can see how nicely it orbits its planet which orbits the Sun And you can set up, you know endless transforms in this regard. That's awesome. It just appeared in the middle there again Looks totally cool at the normal font size So it looks totally cool anyway though, right? So it's pretty handy. You can make like very rich and dynamic effects These are literally only one div that Sun is just you know some box shadow a background gradient And that kind of stuff and border radius as well So there's nothing like fancy going on it. There's no graphics except for the the galaxy like the the background And I just ruined the big reveal on that one you can also incorporate transform images in Transforms into images themselves. So this is actually a bunch of elements sitting on top of a picture of tile and You can script these So I made them dance a little They're This is not practical, but you know you can do some pretty cool things and and if you consider like the really weighty like flash movies that used to be created to like promo some Movie. Oh, it's the Matrix 17 and we're gonna make you some crazy mysterious looking thing You know you can now do that that cool stuff like in the web browser without having someone to like You know making them download a bunch of plug-ins and wait for it to load and do all that Because this stuff is just like right in your web browser for you And then you can also combine transforms with other CSS to make other interesting effects So this one is combining with the blur filter and it is also Kind of lagging just because of the slide deck, but I've got another demo of this online somewhere else And also I did set this up with content editable just to prove That it's not any hocus-pocus or like images So this is all like live stuff that you can this is HTML that you can edit Which it's pretty cool like this isn't super practical, but you know it's fun This is a conference. We're not here to learn about work And so back to our humble little friend the DOM element We now have a whole new world for it to explore You can go in new directions and translate It can rotate And you can even rotate it on a different axis than the middle of it And then as we talked about before it you can Change you can make it look like the real world. You can make it look very surreal And you can do other things that we have yet to discover because if there's anything that's sure is that or is anything That's for certain is that once you publish a web standard someone finds a way to use it in a Completely new method that no one ever imagined so I'm really excited to see this one start maturing and get into a bunch of browsers you can definitely do this in Chrome and Safari and Firefox right now, and I assume everyone else and I attend maybe and I assume everyone else is definitely working on it because Well because I want them to be because it's a really cool web standard So I've got a bunch of other links and resources here if we want to look through some of them This one's actually pretty cool, and you may have just seen it because it was making the rounds lately the last week or two this is a demo of a first-person shooter in Transforms whoo, that's not happy when I'm using two monitors But you can see here that like I'm navigating through a 3d world like I can jump I Can't kill anything though, but props to this guy for using half like two barrels So this is all just with CSS and you're moving around Actually, there's a lot more to this than you'd think because there's no such thing as a camera. That's actually a really good point to bring up there's no there's no Way to move the viewer in a in a transform in a CSS transform you would have to move the entire world So the camera would be like a base element, which then everything else is sitting inside So this is actually a lot harder than it looks compared to all the Little demos that I just showed But It's really cool stuff And I mean you're gonna now when you open a web page you used to like oh I'm expecting some graphics to load and now nowadays when you open a web page. What do you do? everyone like shrinks the window right and You know like next year when you open a web page, you're gonna like start walking around within the environment that you're creating and So it's pretty cool I'm really excited to see this stuff Mature Glad my Wi-Fi is working. This is a book a book that Google made So you can see all that stuff unfolding there Like these are all transforms driven off of I don't know how they did that actually Because there's a difference between like a lot of the examples I just showed you are just switching between classes and so you can use CSS transitions to make a smooth transition between those two but this is actually Checking where my mouse is and doing all sorts of stuff like that. So basically running an animation based on the Amount by which I've opened the book Which is pretty impressive There we go you too I imagine they use some JavaScript I'm sure this is mostly JavaScript, but they definitely use transforms to make the 3d effect So I actually saw tab atkins mentioned this the other day he wants to revamp the the animations spec and merge it with touch events or They're related in some way because he Described how when you like pull to refresh on your phone or something like that What you're doing is you're actually seeing an animation that is not time-based, but it is progress-based and it is measuring how much What percentage of your gesture you are finished with and so there's actually murmurs of Merging a bunch of these visual effects along with some sort of touch API so that you can Do that you can basically run animations not solely based on a time index, but based on a user input index type thing Which is really cool stuff. It'll it'll make everything feel More native, you know in in the browser Another demo Oh, yeah, we got more 3d text here This is a simmer I Did this a long time ago if you want yeah, put those glasses back on if you're so inclined So this is uses that exact same effect and Maybe I can bump this up So I'm everyone can see that right. It's a it's like popping out of the page when I when I mouse over it And this is a super easy effect It's just a simple text shadow and then the transforms naturally enlarge them proportionally with the text itself Because like I said these are Translating in 3d space. It's not like a gimmick that is being pulled off here for you Clouds these are neat These are not volumetric clouds, but they sure do look it These are just Divs basically That are again inherited. There's basically like a global camera element That is being rotated according to the mouse position and then All these other things are inside it. And so they all stay in one coordinate system and then you can change it like Explosions So This is another Very visually rich example, but it's very simple So these are like my favorite examples because like you could go and Re-code this in a day. It's really not that bad Here's something that's slightly practical That actually belongs in the next tutorial section. Yeah, this is like a histogram But this is a live histogram like in in the web browser so you can see the div there is being highlighted and This stuff is really not that bad to build like that tile example that uses like a rectangular prism each one of those pieces of tile is actually a six-sided figure and You just kind of fold it like origami But this histogram is pretty cool because then you can this guy Or I don't know who it is but this person Set this up to kind of like take the content of the div and then Create that presentation from the content itself Which is which is awesome and then here's another just neat eye candy type on code pen here So this is using a bunch of If actually is code pen so I can actually alter this one So you see here there's a scene element It's really tiny, but take my word for it. This word right here is seen That's basically the camera that we were talking about before and then we've got ball ball ring. I am going to slap a background RGBA Something or other here Yeah, I broke it. Thank you There we go. So that may make that one a little clearer. This is actually a bunch of elements like all Just rotated a little off of each other, but because he didn't have a background Initially it looks like a sphere because he's just using the border radius and dotted border to create the effect of a sphere That's actually something worth admitting You can create primitives as long as they're polygonal so If they are polygon based They're easy to create if they're like going to be spleen based or baisier, you know nerves or anything like that Then it's really hard to make still you can't make a ball easily or any curved surface so This is a great first step I would say But you're not going to be able to reproduce 3ds max or Maya or anything like you know that that type of Create that type of model creation is not going to be possible yet just using CSS I've got a couple other just like intro Links in here, I don't really want to go through them, but I will show this one because it has so many examples like Just showing you how exactly you do all this stuff. So You can go in there and it shows you I mean like I'm not the first one to make a cube but In fact, I'm really glad I didn't add these same sliders to my presentation because I'd never open this page before So there you go. You can kind of play with these Values this makes the cube really flat this makes it huge There we go See how weird that looks. Yeah, so You can get it back to a pretty reasonable size But it still is like kind of warpy. It's hard for me to tell because I'm looking up at this projector But this is a great resource and these are all in the slides So they may have any questions. Yes. Yeah, so the question was Maybe could we ever import OBJ files and I'm not sure what system that's from but Basically at the time at this time you'd probably have to find Or create an interpreter in JavaScript to take some sort of other native 3d file into here As much as I would love to do that because before I did web development. I did all 3d graphics and stuff like that So it's actually a nice full circle kind of like oh, I thought it was just I wasted those years But no I did not Now I understand all this Yeah, unfortunately right now you can just you can only use like elements themselves Yeah uh-huh So the question was about the matrix 3d transform And and I mean that in terms of a like matrix of numbers that you input into CSS and then it transforms for you and I have never Done anything that yet because I have so much fun just doing Stuff with these basics and we haven't had ever a client come to us that says like I Need this awesome 3d thing and I really only I'm ever gonna look it in Safari and you know go do it Yeah, yeah But so right now I wouldn't be able to like pontificate on it, but I'm sure that someone's gonna hook that up into JavaScript if they already haven't because It's totally doable and you can swap those numbers out on the fly and Transforms are actually hardware accelerated. That's not something I mentioned, but they they are and so what essentially that means is when you make a transform or you transition between two transforms it turns your element into an image for a minute and Does stuff to an image of your element and then turns it back into a real DOM element afterwards I mean you might notice this from time to time when you do a different type of transform and it like makes it bold Well, it moves it and then it unbolts it when it gets back over to where it was You're seeing a glitch in in hardware accelerated animation there and so There are actually a couple of gotchas that I could just list off right now You don't want to change Color or background color while you're doing a transform because then it's having instead of Instead of keeping that as a static image and transforming an image Then it's like changing the DOM every time and you're doing one of those nasty repaints Which people talk about Avoiding to make a snappy experience on your site Any other questions yeah Texturize it. Yeah. Okay, so the question was if I wanted to apply texture to the box Like how would I do that and would you use a sprite or would you use something else? and This question is particularly Poignant because it's That is how things were done in a performant way sprites guys did not come from the internet They came from you know video games and stuff like that a long long time ago when you know like We're talking Mario one and before We're using sprites to make their video games run fast So in this case unless you had a use case for making it load Super fast and you needed all those images in one sprite It's not going to affect the rendering of the transform At all to combine the images Normally we we spray images on the internet in order to reduce HTTP requests, but That doesn't have an effect ultimately on the transform itself Yeah, well it Yeah, yeah, yeah Well, I'm sure one day it probably will like if you've got a huge city that you wanted to you know I have yet a texture that you're using all over the place or something like that Then definitely you'll be making sprites that are more reminiscent of video game sprites than of Typical website layout sprites Yeah Any other questions? No, cool Yeah, like I said, these are on GitHub and That's my github right there Are you PL and Twitter as well? You want to email me I am chris at four kitchens and Yeah, these are already up on github pages, so just go check it out if you want to grab them Thanks for coming to the presentation