Discovering the CSS Perspective Property

Подписаться 351 тыс.

Просмотров 77 тыс.

50% 1

Today we learn about a CSS property called "Perspective" this will take your css transformations to the next level.
Check out the code: codepen.io/devt...
- - -
This video was sponsored by the DevTips Patron Community - / devtips
Listen to Travis' Podcast - www.travandlos....
Get awesomeness emailed to you every thursday - travisneilson.c...
You should follow DevTips on Twitter - / devtipsshow

Опубликовано:

30 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 207

@MeTRoD 8 лет назад

I've got a tip for ya'. In Chrome DevTools, press Cmd (or Ctrl) + Shift + C to activate the element selection tool. I just learned of this recently. I save seconds each day!

@sanjeevakaalex 8 лет назад

That's why I always read the comments, Thank you :)

@OfficialDevTips 8 лет назад

I love this!! Thanks!

@bolivarlema 8 лет назад

Wow!!! Thanks!

@sanjeevakaalex 8 лет назад

Just found this, medium.freecodecamp.com/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329#.biqooliwp

@abdelrhmanadel4824 7 лет назад

thnx

@appelflap39 8 лет назад

To eliminate the black lines on the right of the pink boxes, the width of the button-group should be calc(100% - 50px). This is the case since the icon has the property of box-sizing set to border-box. Therefore, the border is included in the width and height of the element which was in this case 50px by 50px.

@OfficialDevTips 8 лет назад

Thanks!

@linuslee6314 8 лет назад

For the backface problem, couldn't you just set backface-visibility on the little icon element to be 'hidden'? I feel like that might be a more elegant solution.

@OfficialDevTips 8 лет назад

ah, tru tru!

@gouravchouhan1790 3 года назад

That's not good at all, hiding a mess is not good if u can fix that mess

@mraloush8959 Год назад

@@gouravchouhan1790 hidding the mess is the exact thing u should do.

@cafelutsa_ Год назад

@@gouravchouhan1790 you seem to have no idea what backface-visibility does

@BigSmoke-r9w 8 месяцев назад

he's tryin to explain the principle in perspective!!

@ZubAirT 8 лет назад

Sometimes you need to look at life from a different perspective. :P

@OfficialDevTips 8 лет назад

Zing!

@fadejmg 8 лет назад

I love this channel, so bad. Really exited about you building a website from scratch. Thanks dude!

@souhailkaoussi6415 8 лет назад

Same here! he should definitely do another serie on building a fully functional website from scratch

@seanwhelann 8 лет назад

Awesome! thanks for making the video, will definitely try this out.

@OfficialDevTips 8 лет назад

Awesome!

@P8860 8 лет назад

The palm explanation really made it click for me.

@atextful 8 лет назад

If calc() were a woman, I would marry her.

@OfficialDevTips 8 лет назад

I can get behind that

@rohitgird 8 лет назад

Really excited to build the new website and great video btw!! :D

@OfficialDevTips 8 лет назад

Thanks!

@markbusch5907 8 лет назад

Thanks for making this, really helped and it was actually really helpful how you explained it with using your hands:)

@holalabellebille 8 лет назад

hello travis and devtips fans, good job an easy solution to hide the flipping panel when in rotation 90deg : .text { position: relative; z-index: 2 } .icon { position: relative; z-index: 1 } works like a charm kisses from france backface-visibility: hidden is ok too, but a little bug appears when flipping back

@rxnniiee 8 лет назад

Love your channel, I constantly learn new things from you and it improves my knowledge of css by a huge margin. Keep doing what you do!

@cthuloox476 3 года назад

Missing you. RU-vid hasn't been the same since you left so many years ago. It's been a much greyer place since you left. A colder place. Frigid.

@ICheezI 8 лет назад

It's nice to see you learning as you record and your reaction to making this work

@tobi3497 8 лет назад

couldn't that problem more easily - with wider support - be fixed by back-face-visibility?

@sakermadafaker 2 года назад

wow man, such a nice way of explaining through example. Definitely subscribed to your channel 👍

@sasikantnair 5 лет назад

Please make sure the viewers see where you are typing !!!!! I was looking all over the CSS and HTML to find where the heck your cursor was.

@felipedallagnolo 8 лет назад

We missed you, Travis. I recently used "perspective" and "rotateY" on a project and could not make it work on IE. Any clues?

@mo4mark 8 лет назад

so super mega ultra fantastic sweet wonderful tutorial

@OfficialDevTips 8 лет назад

Glad you like it Momar :)

@surajitdas6555 4 года назад

I know how difficult it is to describe to us. You really did a great job. Nobody explain about this property as It's bit uneasy to explain in words... 😁

@flintsteel7 8 лет назад

That was a cool video, I seriously enjoyed learning about CSS perspective. You explained it very well. I'm gonna have to store that one away for future use!

@OfficialDevTips 8 лет назад

Thanks for the feedback flintsteel

@juliehutchinson5153 4 года назад

awesome lesson, after watching other resources about this topic, I can relate to the hands example and the explanations you gave... thank you!

@sashkodav 5 лет назад

Can't you use Z position for your icon elements to be -1 or lower. That way you will have your elements behind the button. Correct me if I'm wrong. Nice video tho

@taospencer1403 5 лет назад

Hello Dude, Can you remember the title of the video you done with Box Shadow bottom where you changed the angles of the shadow?

@pukirocks 8 лет назад

this channel reads my mind

@OfficialDevTips 8 лет назад

its a dirty mind. :) JK

@lookintomyeyes2681 4 года назад

@@OfficialDevTips lol

@FullPoweR159 7 лет назад

one alternative will be to use transform -90 degree with backface visibility hidden. Nice video!

@madubukoogbobe7102 7 лет назад

Great tutorial! how do i see the raw html behind the example you gave...looking at google chrome dev tool it feels like i'm just seeing the html for codepen not the example the video was on..

@Josh_w_k9 7 лет назад

can you please upload the complied version of the mark up to codepen ? Thanks Great work though :)

@sunset5103 8 лет назад

Thank you very much. I always forget this thing.... but you make it very easy

@pointblankcasting9446 8 лет назад

I have very important question, like linking a search bar to my video playlist how do I do that?

@AutsajderRR 3 года назад

woudn't it be better to use backface-visibility: hidden instead of pespective origin?

@Cube189 8 лет назад

Thank you for explaining it. I've known of this property for two years but never fully understood what it does (depite digging through documentation).

@Calebhillary 2 года назад

I think the folding part should be floated out instead of using the calc logic, but nice tip. 👍

@AlessandroMenduni 8 лет назад

Will develop another web site from the ground up! Looking forward to it!

@christophehebb1555 8 лет назад

For those who are interested, I created a codepen with an overview of all the different settings: codepen.io/christophe1800/pen/YGamgw

@waleedgamal2580 8 лет назад

great video ! BTW it think it'd be a good idea if you add En subtitles to all the channel's videos :)

@husreihn1070 7 лет назад

Shouldnt it be -58 px its 4 px per border so left and right makes 8 px together

@Shadow01Net 8 лет назад

@DevTips hey travis great video, what is your instagram username ?

@pablohernanaraujo 8 лет назад

I dont know if is correct but u try to splain vanishing Point. Great tutorial.

@resty1672 3 года назад

Using hand is very smart way to explain this concept, makes a lot sense, thanks!

@mikesheehan5946 8 лет назад

Like others below I knew about this but never understood how I got it to work! Another brilliant tutorial

@chidinduuwaeziozi7360 8 лет назад

I fell in love with this. Your charisma is off the hook. Brilliant!

@dantemesquita7751 7 лет назад

in the code pen don't work anymore. Thanks for the Video!!!

@pedrogregorio 7 лет назад

Can you make a video on tips on how to read and find code when you come across a cool element on a website?

@meesbuschman5496 8 лет назад

I didn't know about this either! Let's start learning

@rajkumbhar2022 8 лет назад

Thanks Travis, you inspired me.....

@cagriozarpaci1673 7 лет назад

You are really funny person and you are better than my math teacher :)

@LoveInspired 7 лет назад

That's some serious attention to detail!!

@jsvihla 6 лет назад

love your tuts and the tune at the beginning. what's that tune?

@desert6120 8 лет назад

You blow my mind Travis.... Thanks man.

@AE-yr6mo 3 года назад

What happened to this dude? Really liked him as a tutor!

@umairahmadmalik 8 лет назад

Travis, you have this amazing, seemingly natural ability to articulate complex concepts on the fly. Also, super excited for the new Website design from ground up series!! Thanks for being awesome!

@AravindBalla 8 лет назад

+Joker Don there might be some bug in handling the time zones.

@devinh.9683 4 года назад

sir you explained this perfectly!

@yeaitsme6834 8 лет назад

Nice video, gave me some great inspiration for a project I'm working on. Also, found out that some friends of mine were also subscribed when I recommended this video to them. Keep up the great work as always!

@OfficialDevTips 8 лет назад

Oh fun! haha, glad this was helpful!

@leavethematrix9939 8 лет назад

Is there a way to control the width of an element in the Z direction?

@bernhardsmuts2265 8 лет назад

I really enjoy your videos! Thanks.

@aymanz83 8 лет назад

One of the best I am following, keep thumbs up

@davejs 8 лет назад

YES TRAVIS!!!!!! I remember recommending this topic like a year ago. Not sure if that had any influence on this video, but I've been waiting for it :) Haven't watched it yet but I will later tonight! Thanks man!

@OfficialDevTips 8 лет назад

It was all you. hahha. No, jk. it was honestly something that I researched this week and thought I would share.

@IvanAnufriew87 7 лет назад

Hi! Say please, what font of buttons ?

@andremcgruder3880 8 лет назад

OK. So I have to do what with my hands? And I'm looking from where? This is crying out loud for an illustration. Don't worry Travis; I'm seeing inside of your head; and although mostly everything looks like that wacky world scene from the move Inside Out I'm digging this perspective stuff.

@OfficialDevTips 8 лет назад

pffft! hahaha. Nice, glad you get it mate.

@venkadesh8689 5 лет назад

From where you are learning these things?.

@lianulloa4863 2 года назад

That hand analogy is worth of a master class

@aronkoffler 8 лет назад

Just saw the title, I'm anxious to watch this one!

@evanb3148 8 лет назад

Travis doesn't know all CSS commands by heart? Now my mind is blown too :D Looking forward to your upcoming videos!

@OfficialDevTips 8 лет назад

Hahhaa, dude. I know!

@utkarshkukreti239 5 лет назад

Wow. Fantastic intro to perspective!

@Samji3877 8 лет назад

awesome.. just? awesome.. Q: to counteract seeing the rotated element could you reduce the rotation instead of moving the perspective?

@OfficialDevTips 8 лет назад

It would need a different figure depending on the length of the element

@solidstatejake 4 года назад

The codepen doesn't work, fyi.

@albertilagan5864 8 лет назад

travs, can comment about materail design of google. been using it lately on some of my webapp projects. Thanks

@OfficialDevTips 8 лет назад

Hey Albert, I've never commented on it, other than I like the documentation

@nicolasparada 8 лет назад

Cool. Didn't know about perspective-origin :)

@OfficialDevTips 8 лет назад

nice!

@BigSmoke-r9w 8 месяцев назад

THIS GUY EXPLAINED IT SO WELL!! I THANK YOU SO MUCH MY FRIEND

@OfficialDevTips 5 месяцев назад

Glad it helped! 😁

@worddoc4322 8 лет назад

Amazing, mate . You inspire me to go on)

@HimanshuChanan 8 лет назад

New Website Wohooo lot to learn More :D :D Excited about that.!!!!

@OfficialDevTips 8 лет назад

Thanks man, glad you are excited :)

@ArnoldsKtm 8 лет назад

Come on dude, what are he odds you haven't heard about perspective and 3d space in css? But if that's the case, you should definately do a video on you trying to make a 3d cube that rotates.

@OfficialDevTips 8 лет назад

We all know and don't. Its a unique mix.

@ShantanuAryan67 5 лет назад

what is HTML(JADE) ?

@phurinatpuekkham8979 6 лет назад

You look like Thomas Frank : )

@stinkyboomboom 8 лет назад

Sexy! Thanks for the videos man. Good stuff.

@OfficialDevTips 8 лет назад

You are welcome!

@timonwa_loves_art 3 года назад

Nice one.i can't wait to use this.

@AravindBalla 8 лет назад

Is that web series going to be about your new website? Please say yes Travis.

@OfficialDevTips 8 лет назад

It's not. I'm going to make a new website for Trav and Los podcast

@kellyjohnson6292 8 лет назад

Wow, awesome as usual. Awesome as usual. Now here is quality coding!

@OfficialDevTips 8 лет назад

Thanks Kelly!

@orosales123e 6 лет назад

What environment is this?

@mahmoudzakria6946 8 лет назад

i think that perspective has a relationship with vanshing point, when the character length get bigger that means more close distance to the element and with less character length that means a far distance to the element like the train bar

@OfficialDevTips 8 лет назад

yes, exactly. That's how MDN talk about it. I realized after I recorded the video that I never used the words "vanishing point".

@alwino88 8 лет назад

Can't you give the flip part a lower z value, so it hides behind the button?

@OfficialDevTips 8 лет назад

That's a great solve!

@maximo5737 7 лет назад

wow... thats awesomely

@aenapoeka 7 лет назад

Thanks for the video Travis, would this work easily on parallax as well? Can I also request a video? :D I've been trying to find the best practice to put downloads on my page, but people seem to have many different opinions D:

@RonalsonFilho 8 лет назад

Pretty cool! Thanks for sharing this, Travis! One thing though: if you set the perspective-origin to calc(100% - 52px) it will no longer show that black dots at the right border of the pink button.

@PrzypadkowyGracz 8 лет назад

Wouldn't it be better to set backface-visibility: hidden instead of messing with perspective-origin?

@keil541 8 лет назад

exactly my thought 😁

@oli7173 8 лет назад

That wasn't the point. The buttons were black anyway. It was to make the animation exactly the same on each button.

@OfficialDevTips 8 лет назад

Yess, all around, but perspective does a little more than just hide things. It makes the movement make sense.

@TheMalni 8 лет назад

Crever guy you are, Travis, thanks for sharing your wisdom with us :)

@selftaughtprogrammer903 8 лет назад

Guru, ur r rokz as always

@monugupta32 8 лет назад

That was a lot of imagination in a single video.. I feel like an architect. :)

@OfficialDevTips 8 лет назад

Haha, really? wow. cool!

@David-sg 8 лет назад

Great video as always Travis, love the content !

@OfficialDevTips 8 лет назад

Thanks Dave!

@ЕвгенийНекрасов-н6м 6 лет назад

Thanks to the author! I have finally understand this tricky property. And man, you have great charisma!

@ThomasRye 7 лет назад

Awesome stuff! Looks like good support for it in general, but keep in mind: IE10+, -webkit- -moz- prefixes needed. Excited to use it.

@biswanathctc 8 лет назад

Good one, nice stuff... Will you please explain about OOCSS & BEM ? Hope that will be great. Really exited :-)

@OfficialDevTips 8 лет назад

There are some videos on the channel on these topics. Do you know about channel search? It's pretty great :)

@biswanathctc 8 лет назад

Thanks for your guidance & your precious time. I am new to this. I went through your channel about those topics, but i got only about SMACSS, CSS Preprocessors & SASS or LESS which are really nicely explained. It will be better if you can make some videos explaining those(OOCSS & BEM) with some live examples if time permits. Correct me if wrong & Thanks in advance...

@SazikimiJaeger 6 лет назад

Every video I watch from your channel makes me think my brain so much that it feels like deepest of my neurons are trying to think think and think to create something. Thanks a lot bro... I'm glad I ran into your channel right when I was learning web designing. It's been only 6 month's and I can feel the dynamic changes that are occurring in me. ^-^

@souhailkaoussi6415 8 лет назад

Traaaavis! Thank you so much Man! I'm so excited about the website! And hey, you'll use "pug" right?

@mmartin7271 8 лет назад

Great video! came here because I was trying to figure out what perspective was doing in the codepen you shared in your ux video on your animation series. Helped out a lot!

@jeffmarsden6295 8 лет назад

I think I've told you this before.. but I seem to understand your explanation on things better than I do by reading textbooks or tutorials. Thank you. Please do more of these "tutorial" type videos.