Sign in

Day 2 notes — CSS: Stacking Context, Transform, Transform Origin, Transition

As a web developer working at a consulting firm, I am relearning from the ground up again in order to become a Senior Full Stack Engineer in the next 6 months.

Learning Path for the next 3 months

  • Build projects (Min. 6 days out of 7) — HTML, CSS, JS, React, Redux, React Native, Node.js, Express, Restful API, GraphQL, Relational DB, Mongo DB, AWS.
  • Frontend Masters — Beginner, Professional, Expert, CSS, JS, Async JS, WebPacks, React, Computer Science, Full Stack, Node, Design To Code, Data Visualization
  • FreeCodeCamp — Responsive Web Design, JS, Frontend Libraries (except for Bootstrap & JQuery), Data Visualization, APIs and Mirco Services, Quality Assurance.
  • Algorithms and Data structure — When studying computer science course: Cracking the coding interview, 2 Leet Code challenges per day

Notes from Project Challenge (JS 30 — Day 2)

Transform

  • The transform property visually manipulates the element by rotating, skewing, scaling or even translating.
  • When the transform property has a value other than “none”, it will create a stacking context. The element will act as a containing block for any “position: fixed” or “position: absolute” elements that it contains.

Stacking Context

  • A stacking context is about how elements stack above each other on the Z-axis. (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
  • Stacking contexts can exist within stacking contexts, creating a hierarchy of stacking contexts.
  • Each stacking context is independent of its siblings. Only the children elements are considered during the stacking order.
  • The whole element is considered in the stacking order of the parent container’s stacking context.

Transform Values — Functions (For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transform)

  • perspective() — Used for 3D; This will control the element’s Z-axis. A Positive value will make the element seem closer.
  • rotate() — This function rotates the element from “transform origin” co-ordinate. The argument for this function represents an angle. Positive values will make the element rotate clockwise, while a negative value will rotate it counter-clock wise. One of the following units must be used after a number: deg, grad, rad, turn.
  • rotateX(), rotateY(), rotateZ() — As the names suggest, the element will rotate on a given axis.
  • scale() — This function takes in either a single integer or two values representing the X-axis and the Y-axis. The scale function multiplies the value to the element’s X and/or Y axis. The function works more like a coordinate system where positive values will grow the X or Y values, while negative values will flip/rotate the element on the axis that has the negative value and multiply it.
  • skew() — This function tilts the element on its axis. If a single value (an angle) is provided, it will tilt on it’s X-axis. If two values are provided, it will tilt on both it’s X-axis and Y-axis.
  • translate() — This function moves the element along the X or the Y axis. The starting point is the top left corner of the element, which also can be represented by (0,0) coordinates. The function accepts a length or a percentage as its argument. If a single value is provided to the function, it will only move the element along the X-axis. If two values are provided, it will move along both the X-axis and the Y-axis.
  • matrix() — In summary, this function is a combination of (scaleX(), skewY(), skewX(), scaleY(), trasnlateX(), translateY()). If you’d like to understand the math behind this function please check out: https://dev.opera.com/articles/understanding-the-css-transforms-matrix/
  • You can use multiple functions at the same time.

Transition

  • This property allows a CSS property to be changed/animated over a period of time.
  • Here is a list of all animatable CSS properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.
  • This property is a shorthand for [transition-property] [transition-duration] [transition-timing-function] [transition-delay].
  • Transition-duration — This specifies how long it should take in order to complete the animation of a CSS property. The values are in seconds.
  • Transition-delay — This specifies (in seconds again) how long long it should wait before starting the animation.
  • Transition-timing-function — These functions determine how a transition should take place over its duration.
  • You can list multiple CSS properties to be transitioned by separating each rule by a comma, or use the key word “all” to transition all animate-able properties.

Transition-timing-functions

  • Ease — This is the default behaviour. Increases the speed in the middle and slows the animation speed down at the end.
  • Linear — The speed of the animation is consistent.
  • Ease-in — Starts off slow and then gradually increases speed until the end.
  • Ease-out — Starts off fast and then gradually slows down until the end.
  • Ease-In-out — Starts off slow, increases speed in the middle, and then slows down again at the end.
  • Steps(n, <jump term>) — Steps represent the number of stops during the animation. A jump term defines how these stops will be presented.

Jump Terms

  • Jump-start or start — The first jump happens when the animation/transition begins.
  • Jump-end or end — The last jump happens when the transition ends.
  • Jump-none — There are no jumps at the beginning or at the end of the transition.
  • Jump-both — There are jumps at both the start and the end of a transition.