perspective property: Explained

Hey, this is the second post on the property of CSS. After the inline-size property we're now heading towards perspective property.

What is perspective property? (Basics)

-> The perspective property is used to give a 3D-positioned element some perspective. When defining the perspective property, child element gets perspective, not the parent element. So, the value defines how close the child is from the Z plane.

The syntax is simple.

.child-element{
 perspective: ; /*  length or none */
}

Learn about values

• length: It is for how far is the element is placed from the view. It's used to apply a perspective transform to the element and its content.

• none: You need definition of this also? If yes. Then it's none 😂 (no perspective transform will be applied.)

DEMO 🤘

perspective property doesn't work in IE9 👊

-> If you run the pen you'll see how perspective works and what it is really. This is just basics and must know.

Now see this DEMO/Examples

• Above you can see that the property is applied to the parent, that is -> perspective: 50em;
• Below you can see that the perspective property is applied from the transform directly on children

Here in the above example you saw the difference between function and property.

What did you learn from?

• Basics Of CSS property -> perspective
• Making objects with perspective
• Difference between function and property
• Setting the property on the parent makes all children share the same 3D-space

---

Projects
-> Try to make a DICE using the perspective property (EASY)
-> A simple skyscraper (TOUGH)

(DROPDOWN THE CODEPEN LINKS BELOW, IT WILL BE FEATURED ON THIS POST)

---

Related Posts/Links

• inline-size : Property
• Animated Emoji using HTML nd CSS
• perspective - MDN Docs
• Ultimate RoadMap with so many resources for Front-End Development 💥💥
  

  ---

  Get the daily.dev extesnsion for busy developers.

  ---

  Thanks For Reading 🙂