3D text animations with CSS

Key Takeaways

in this video we're going to be looking at how we can take this boring piece of text right here and do this magic with it hello my friend and friends and welcome back for yet another video thank you so much for coming to join me and if you are new to my channel my name is kevin and here at my channel i hope you fall madly deeply in love with css and if not madly deeply in love with it at least to be a little bit less frustrated by it and this week we're doing that by diving into the wonderful world that is 3d css which is something that i'm not actually super comfortable with so to help you fall in love with css a machine is coming on to join me and help us learn together how we can do this type of thing with our text you might have already seen another video that i did with amit where we learned how to take a cube spin it into a 3d space and have a ball bouncing on top of it that was really really cool and a lot of fun since then he's been playing a lot with 3d text sharing all sorts of really cool things that he was up to and so i thought it'd be a lot of fun to have them on it's always super interesting to see how this stuff is actually done so yeah let's go and dive right into it so here i am with emmett i just want to say thank you so much for joining me for this i'm really looking forward to it the last one was an absolute blast and i definitely learned a lot so i'm looking forward to to what you have to teach us today thank you i'm actually exciting to be here again uh so last time we talked about a lot about 3d and lighting and shading and lot of perspective today we're actually going to talk about text um the concept we're going to talk about today actually started a few months back when i wondered how to wrap a text around an object uh i tried actually my first attempt was with uh with gsap they have the splitter that split different letters uh and it kind of worked okay but it worked better with monospores my monospace letters which makes sense uh so i had a thought of like instead of the splitting the letters splitting the whole div into panels okay and then each panel will display a segment of the text so the first concept made me think of a lot of divs with a lot of text in inside uh and i didn't like the concept but then i thought oh i can actually solve it using something that we both like uh pseudoelements so i actually experimented a a lot with this method so if you can just put my screen on just a few examples i did i've done with this method so it's something like that so we can actually see the panel we'll zoom in a bit uh in this one uh this is the daily planet if you like superman uh the same concept uh this is actually again the same concept injects different panels that just move up and down instead of in rotation and even this uh this pen uh again it's just panels that's turning and dropping down okay and so we're actually gonna look let's build one and uh later on we're gonna actually gonna see some more examples okay yeah that just looks so cool i love it so much thank you uh and of course everything is a css obviously we didn't mention it obviously i think it's uh just pure css and uh because we are gonna use some books start with a it's a fresh new pen we don't have nothing here uh let's just add a very simple uh centering to the body let's add a background color uh background color of black uh let's add it color white uh we're gonna use a display of the grid and uh place items uh centered just so everything will be in the center oh we need you to use uh main height again just to put everything in center so let's go to the html uh and you know what do you want to write sure yep i'm ready to go all we need is just a container div let's call it a banner uh and inside we'll have five panel we're gonna start with five later on we're gonna do some more so just yeah uh but let's give them a class just so it would be easier to read uh panel oh panel perfect yeah five exactly that's it so that's our html for for now and let's go to our css we'll have a class of panel ah yeah and just so we can see it let's have uh uh uh no that's not the background let's 100 pixel uh just so and and let's do a border actually let's just move on one pixel by yeah so now we can see them uh but we want to uh we want him to be side by side so let's here in the uh banner we're gonna give them uh for now we're gonna give them a display slice just so it's side by side okay that's a little bit bigger yeah um now again we we're going to add the text using pseudo pseudo elements uh after all before and it's actually easier that way because that way we can uh animate and change the text using animation we're going to see example of how do you how to animate uh text uh later on oh you just need one of them oh okay cool makes like easier yeah and the content uh let's say for now uh okay so now we can actually see the hello world here right um so let's play around with the text i want it to be bigger i actually want the text to span all across the banner so let's say 100 pixels uh so now it's big and uh oh okay first of all before we gonna fix the the width uh we're actually going to add a position absolute to each uh create pseudo element and we're going to add a position relative to the panel because the position of the pseudo element will be relative to the panel and now as for the width uh we need to set the width of max of next content because we want it spread we don't want to drop a line break a line exactly and the last thing we need to do is right here in the panel uh we said we want each panel to present just a segment of the text so we're going to add an over an overflow of hidden okay so far so good we actually can see that each panel has now a segment of the text but we don't have the right segment obviously so if you think about it for a second the the text is is absolute relative to the panel and if you look just just the second cube right here the second panel right here uh the right now it starts here in this corner right but we need to to move it backwards one length one width of the panel okay and the third one we need to move it back two parts uh two width of a panel and again and again so we can actually use it do it using a loop no you go for it you go for it i'll just i'm just gonna say just because last time when we did something a few people were asking because we were using nesting on the last one we did so just for anybody who's not familiar this is with sas so uh this isn't regular css that we can do but we'll look at the code that it outputs it just lets us write a lot more code in a lot less time by having a loop here just uh we're actually going to use the width as a variable because right we're gonna uh let's do with uh it's 100 pixel so now the width will be width and we say um dot panel um amps supposed to be oops i plus one so i'm selecting each time a different panel in zero it's the first one in two seconds and so on yeah and for each panel i'm going to give i'm going to give a variable left and the left is as we said uh the width the width times the the index and of course times -1 because we want to move it backwards yeah so we have the variable uh left okay so we're going to come here to the panel to the before because the before is the absolute and we're going to say that the left equals to left and now uh if we run it so here we have everything so if you're gonna uh comment down the border just for a second uh we can see that the text is absolutely uh it looks like a regular text but it actually divided into each panels into five panels so we can animate and do everything we want with each panel individually so we're going to see it in a second but we can see that the text is a bit uh uh cut here okay uh so we can actually adjust it very easily we can either let's put the border back for a second uh we can either just uh uh make the excuse me i meant make the font size uh i don't make the font size a bit smaller for example and i have pixels uh or let's say we can actually make it bigger and we can then change the width uh let's say the width is 120 pixels so um 125 pixels so it's very easy anything we did the text is will remain the same thing because we're just moving the same variables okay uh but let's uh [Music] let's make it 100 again and uh let's say uh the font size that's really cool it's so simple but it's like it's very easy to do all the adjustments like if you want to change the fonts obviously everything going to change but it's very easy to do these adjustments with any fonts you want to use uh you start to ask no i was just going to say that like the when when you made all the panels i was sitting there going like how exactly we're gonna get it and it's just it's such a simple solution at the end that yeah it's great yeah so we're actually gonna see example in the end that we are dividing the panels into x and y so it can be more complicated but we're going to stay uh simple for now and we actually let's uh when i like to animate them animate them for like for example i can make uh in left left i can make a top and the top can be let's say random of 30 pixels so now i can also have a top here now each panel is going to be a different height we can adjust the height but but you got the idea but let's remove it and we'll actually um let's get back to the html because i want to add panels so i'm gonna add uh let's say 19 panels because i want to have 24 in total okay so adding panels um so here we need to change this one to 24 and we're going to make the width a lot smaller for example 25. it can actually be 22 maybe maybe yeah so we're gonna do some trial and error here um yes let's get rid of the border and you know let's play let's add um okay so but by the way i said we've got not gonna do math if you wanted if you had like 24 parts of something and you want to divide it uh into 360 degrees you don't want to do all the math all you need to do is to take the total and divide it by the number and and just multiply it by the index and so now each letter is going to have a different variable view and it's going to be in different spaces all around the 360 degrees yeah so we're gonna we have a variable called you okay so we're actually gonna have a color and we're gonna do hsl yeah uh bar of hue and 75 percent 75 percent you can play around with this obviously and now we have a colorful text and we it looks nice because the the the width of each panel is like 21 pixels um and we can actually as we said we can actually interact with each one of them uh individually so let's say um let's say here in the panel let's say here we do a panel hoover for example and we can add a transform uh let's say translate no let's do a scale it's just for demonstration is 1.5 so now when i hoover them you can yeah so again make uh have your imagination run while you can have a lot of things doing that by the way this uh uh the hoover effect i actually use it to uh do something like this one uh you can actually see the panels this is exactly the same concept as we've seen right now just just looks nice that's so cool thanks um and one more thing that we can do is obviously add animation we can play around with different animations for each segment so let's add here in the panel uh animation uh let's call it rotate so let's say uh panel rotate let's say six seconds um infinite and let's say is in out uh let's add a keyframe of rotate uh let's say um let's work on the on on the x-axis like for this okay so rotate x from zero degrees you actually don't have to add the from it's going to work exactly the same without it i just like especially when i'm doing videos for readability purposes so now we can see uh rotate uh first of all we don't see the direction it rotates because we don't have perspective so let's add a perspective but here let's do a small 500 pixels um so the perspective is sort of like the the angle we're looking at it from right yeah or the distance away we are if the distance we are from the center of the of the yes perfect so we are 500 pixels away so everything's look if you can see that the the top goes to the back so it looks smaller and the front bigger um actually i wanted to pause for a second so instead let's do uh zero percent to like 80 100. and uh let's do excellent so now it rotates for 70 of the time and for the last 30 it stands it stands still and now what we can do is actually add uh relay uh so let's say that the delay is um the index number time 0.1 second okay so we can come now here to the animation and add the delay and now it looks like so that's so cool let's instead of run rotation let's have it make pure patience so 720 degrees and yeah it looks much better and actually now that i'm looking good at it um one more change i want to do so i said that the the the animation pauses for 30 of the time right so let's divide it in half and so it's 15 and let's have the 15 in the start and then 15 in the end so now it pauses for 15 in the start and 15 in the end and because the process is equal equal we can actually come here and add alternate oh nice yes and actually because it's an alternate you can let's make it a smaller path so now uh yeah so now it's going to change in one direction and then it's going to pause for a second and to the second direction i actually like this one that's really cool that's so much fun um yeah so uh yeah it's so much fun but uh we're gonna have to delete everything because the next step is actually to do what we have to do is to wrap the text around uh around something so uh so okay so now we're in a different pen we save the last one so here we can uh start to delete a lot of a lot of things uh we actually need to delete all the animation we don't need the animation anymore keyframes anymore um we obviously don't need delay let's save the view for now okay and you know just so we can see the panel we're not going to use the board because when we when we use the borders uh shift a bit uh the the one pixel of the border so just here we can see it let's add a white background a very uh with low opacity uh you will see why i use low opacity in a second uh so we need to uh to wrap wrap each panel uh forget about the text we saw that the text uh adjusted itself to the panel so we need to set each panel around the center of the axis so in order to do it first we're gonna we're gonna put h panel uh in position absolute okay and we're gonna uh translate it into center okay then we're gonna rotate each panel uh a different angle according to the angle it's supposed to be and then we're going to shift it you're going to translate it on the z-axis because every time it's on a different z-axis in a different and in an equal space from the center okay i hope i was pretty it makes sense yeah it makes sense to me we'll see so i guess for that we're you're just using your loop again right so just here in the loop we actually need uh just an angle and it's very similar to the uh to the hue just 360 degrees then uh we'll add the unit here and divide by 24 uh x yeah so back uh we said that okay so now we have a position absolutely we can see that all of the panels are right one on top of each other because they're all positioned absolute so let's have a transform of translate we're going to translate them back to the middle so it's minus fifty percent minus fifty percent because again we're gonna maybe change the size and height of the panels later on so we're gonna use it like that uh and then we said we're gonna rotate it we're gonna of course rotate it uh around the y-axis this is the y-axis when i write it around the y-axis uh angle and so if you're gonna leave it like so so you can see everything is you can see it but it's like everything is around each other uh and then we're gonna use a translate of z you know send backwards and now the question is how much so again we can use a lot of lots of math uh uh math to get the precise uh number or a lot of trials and errors so let's say like 150 pixels uh yeah that's that's oh you know what we actually need need let's do something before that uh there was a step i forgot so let's for a second let's uh put it in the position relative again um yeah and let's add more text because i wanted the panel to be uh longer so let's just add more text here um yeah so hello world nice day okay yeah there we go um yeah so the text is all over here so uh let's uh let's leave the phone the same size but let's make the panels uh let's say 50. um yeah that looks about right so now let's back to position absolute we don't need the relative anymore uh yeah so now you can see why i used uh the opacity on the panels because when you see the the the two panels intersecting each other so you know that the number is too small if i put a bigger number so you can see that the the gaps are are darker so you know you need to put a smaller number okay so i did the math before and it's 190. uh so now you can see that the panels you can almost if it's too much like a 189 you can still see the lines you can see uh yeah so what one knight is uh it's the closest one um and of course we forgot to add to the banner [Music] style because you see the text the text is like the back side is in front of the front side uh yeah so we needed the transform style uh preserve 3d um yeah so now you see it actually preserves the the the they mentioned the 3d dimensions of the world so the front goes to the front and actually we want to look at it from the top so let's add uh first is oregon maybe you remember how to look at it from the cup um positive value fifty percent called uh so fifty percent is the x because we want to stay in the middle yeah we want to uh let's say 50 minus i don't know 100 pixels um that's so yeah we're actually gonna do a bit more yeah and we can uh that about the background so now we can see it's wrapping and we can actually add an animation uh so let's add the animation right here to the banner uh because we wanted to rotate uh animation okay uh this one let's make it slower let's make 30 seconds let's make it 24 seconds uh infinite and linear because we wonder we want the rotation to be linear um again not here difference rotate um let's just make two trans form uh yeah so now it's working to the wrong side uh minus 360 degrees and yeah and now it rotates to the right side uh so this is again this is just an example what you can do with it uh we've seen some example where i use it to wrap things uh to wrap text around things but you can actually take it to the next level uh like the hoover effect i see i show you uh like this flag actually uses the exact same concept each uh devices into panels and each panels uh has a different animation on it and the text just looks uh as a single piece and again you can actually animate the text um for something like that so yeah you're dividing it both ways like you almost have to have the same thing set up over multiple actually here here it's just it's very long panels and and the line okay cool right yeah yeah uh but if we see like he like here so uh when you click so it breaks and so it has three lines and the text here it's divided into x and y's and uh this i don't know if you remember this one uh so yes i remember that one yeah yeah when you open you can see that the text inside is actually it's also uh an text just because i want to uh to break it down just three panels it's the same concept and by the way i just this is this is a very different method i just wanted to show how you can actually animate uh the text so you can actually use a keyframes to animate the the content of of the pseudo element so so again this is a completely different method but you can use this animation on something like uh like that for example uh last thing i want to talk about when when we are doing 3d animations um and we see the back of certain elements so sometimes we want the back of the elements to be uh like darker or looks like i don't know to bring the front more to be more to stand out so there's actually a couple of ways to do them it's like three normal ways to do it uh first one is to use for each panel or for each element another element like another studio element like to use it after and put it behind it and to add like a like a certain black opacity on it um so here's not going to work very good because we have uh overflow hidden on the right on the element so you can't but in certain in certain situation you can do it uh the second method is to uh just use animation so when the animate when the the certain panel goes to this specific space uh make it darker or make it more uh to introduce its opacity or whatever so it's a bit difficult it uses a lot of math and in some cases it works great it can work here but we're not going to do it here uh the third method and which is the easiest way is just to put a screen in the middle of the screen just put it like a dark uh a dark screen so everything that is behind the the screen which is normally the back side of elements like here it's gonna look darker and everything in front don't look lighter so it's pretty easy to do it uh all we need to do is to come here and add a div of screen okay and we're actually gonna wrap both of them in uh in a scene because it would be easier and we actually need to have uh the scene needs to have a position relative so everything is going to be relative to the scene um so let's go here to the screen and um obviously it's going to be position absolute uh let's have a with so we said we moved each panel 190 pixels to each side so the width of the circle it's 380 pixels so let's make this one 400 pixels just a bit wider okay so 400 pixel and the height is let's say the same 200 pixels just so we can see it let's make it red and um let's of course um yes so now it covers everything obviously uh first of all let's add uh we're gonna need to add uh oops sorry so that's okay i lost it the this one to here also it will preserve both of them uh yeah i had a few because i'm so used to just layering things like z index and stuff and i'm not into like the 3d world so i was thinking like there must be something with because we have the like we're using the transform on the z-axis that it's going to work but it just just doing that is enough which is i was expecting a lot more work to try and get it to be like in the middle but at least because we added we added another uh container yes yeah again we need the scene to preserve the same 3d elements of the because we did we gave the perspective to the body if you get to protect it to the scene or to the banner well it would work uh so again it's obviously not it don't need to be red it could be just like a black or like a black with a certain opacity uh which would already be a step up okay and you can you can play around with the opacity of course uh as much as you want but actually we can also use a background image and use uh linear gradient and we're going to start with uh with the color with the higher opacity and on the sides and and the lower opacity like a darker uh darker extreme in the middle so let's say and so we can have this nice i'm not even necessary oh i forgot the the linear range from up from that's right now so i got it i need a breeze yeah so yes but again you know i like those little things that make make a difference uh and again we can play around with it we can play with the colors and whatever you want just those nice little touches that i like to add hope that uh that some guys would see uh that it's very really not complex and we'll have some tips and advices and taking these ideas and take it uh forward uh i don't know yeah definitely and that's actually what i was sort of thinking as we were going through this and you're showing those other examples i think it'd be really cool if um if people would sort of either fork what we're working on here or come up with their own ideas and share them with us um and definitely you know if you guys create anything no matter how simple or complex it is if you're just jumping in [Music] [Music] down in the description below so definitely share share everything you can come up with and any experiment no matter how small or big with any of this stuff and if you really enjoyed that and you haven't yet seen the spinning thing with the ball bouncing on top of it and you'd like to check that one out you can see that video right here and if you want to see something that i did all on my own with 3d stuff a little while ago i actually made this 3d spinning card thing so if you want to check that one out it is right here for you to check out and with that a really big thank you to my supporters of awesome over on patreon stuart and randy as well as all my other patrons for their monthly support and of course until next time don't forget to make your internet just a little bit more awesome