A long standing layout challenge for front end folks has been the “sticky footer” layout. A sticky footer is one that sticks to the bottom of the page if there's not enough content to fill up a minimum of 100% the screen height, but also one that gets pushed further down the viewport like normal if there is enough content.

![Sticky footer visual](//images.ctfassets.net/rex0us6r928o/4Lh0I4fMog7BWHpsRkmgjX/400d8607840dcc29a17f6393ea8df678/sticky-footer-visual.png)

Nowadays, it's pretty simple to achieve this layout! We're going to explore two ways:

1. Using [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
2. Using [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

But first, let's look at some common HTML and CSS for our layout.

## The Common HTML and CSS

I'm going to structure my layout pretty simply, with a `header`, `main`, and `footer`, and I'll wrap all of those in a `.wrapper` element:

```html
<div class="wrapper">
  <header></header>
  <main></main>
  <footer></footer>
</div>
```

This gives me a pretty contained structure to work with, and some easy targets for my layout. As far as the styling goes, we'll want to make sure that our `.wrapper` element is at least the height of the viewport at all times:

```css
.wrapper {
  min-height: 100vh;
}
```

**Note: I use [normalize.css](https://necolas.github.io/normalize.css/) in pretty much all of my projects, which does quite a bit of “normalization” of CSS across browsers. If you're not keen on using a library, then the one important thing of note is the margin reset on the `body` tag:**

```css
body {
  margin: 0;
}
```

Right! Let's jump into the specifics.

## The Flexbox Way

With Flexbox, my thought process is that I first need a [column based `flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction). With that, I can then set my `header` and `footer` to occupy as much space as their contents require, while the `main` should always fill up a minimum of all of the available space left. Here's what the CSS looks like:

```css
.wrapper {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: 0 1 auto;
}

main {
  flex: 1;
}
```

Voila! Simple. Here's a little [CodePen demo](https://codepen.io/callmenick/pen/xeRWOg) of the Flexbox version.

## The Grid Way

With CSS grid, things become even easier! Grid is such a powerful spec and is perfect for controlling these overarching layout setups like this. All we need to do in this case is target the `.wrapper` element and define our grid layout there. We'll want three rows, and like before, we'll want the `main` row to occupy a minimum of the remaining viewport height after the `header` and `footer` take up as much space as they need. Here's the (dead simple) CSS:

```css
.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
```

And that's it! Here's a [CodePen demo](https://codepen.io/callmenick/pen/rbWJpE) for the Grid version.

## Browser Support

Support for both of these APIs is really great, with [Flexbox](https://caniuse.com/#feat=flexbox) edging out [Grid](https://caniuse.com/#feat=css-grid) by just a bit due to it being around longer. If you're worried about supporting old browsers, then maybe Flexbox is for you. With this particular layout though, I'd choose CSS Grid anyway. The fallback would be extremely graceful on browsers that don't support it, as they'd just render the three blocks stacked one on top the other with no sticky footer.

Wrap Up
-------

That's just about it! We've taken a look at two powerful CSS APIs and really simplified a once non-trivial layout implementation with just a few lines of CSS. Thanks again for reading, and if you have and questions, comments, or feedback, feel free to reach out.

CSS Sticky Footer with Flexbox and Grid

## The Floated Labels Technique

When we’re dealing with inputs, there’s a host of techniques to consider in order to give users the best experience. We need to make sure that we’re giving users necessary information at all points in time, and that means finding the balance between too much and too little. Two pretty important pieces to the UX puzzle are:

1.  The `label` element which [according to the MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_%3Clabel%3E_element), is the only way to provide explanatory information about a form field that is _always_ appropriate

2.  The `placeholder` attribute for the `input` element, which [according to the MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute), lets you specify a text that appears within the `<input>` element’s content area itself when empty. It’s intended to be used to show an example input, rather than an explanation or prompt.

These two elements can be used in tandem to create instructive form UI, and one pleasant way of doing so is what I call the “floated label technique”. In this UI implementation, the user encounters this flow:

1.  They see an `input` with a `placeholder` showing some descriptive example input, and the `label` is initially hidden.
2.  When they focus on the `input` and start typing, the meaningful `label` animates and _floats_ above the input.
3.  As long at the input has a value, the label remains visible and floated above the input to remind users the original meaning of the input

This UI technique does indeed slightly bend the definitions of `label` and `placeholder` listed above, in the sense that we’re giving the `placeholder` more initial importance in having to explain the input to the user, but it’s a tradeoff for a neat UI component, and one that I’m personally comfortable making. Here’s a quick preview of what we’re going to build.

![Floated Labels Demo](//images.ctfassets.net/rex0us6r928o/1JTY6RBNrAaeURJckBc0ww/fe22abdc25fd11daa573a31f2ffecb54/floated-labels-with-placeholder-shown-demo.gif)

## Floating Labels With Only CSS

Registering a focus event, determining if an input has value, animating a hidden element into view, deciding whether it needs to stay in view or not depending on input value… this seems like a job for JavaScript, right? **Wrong!** We’re gonna use a neat CSS pseudo class, [`:placeholder-shown`](https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown), to achieve the effect. From the MDN:

> The **:placeholder-shown** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes) represents any [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element that is currently displaying [placeholder text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder).

In other words, if an `input` has any value in it, we can safely assume that the `:placeholder-shown` pseudo class will never be reached in our CSS.

Here’s the train of thought I came up with to achieve the floated labels technique using this info:

1.  Structure my markup such that I could target my `label` as a [adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors) from my `input`, and wrap the two elements in a containing `div`.
2.  Style my `input` and `label` accordingly, including the `::placeholder` pseudo element.
3.  Move the `label` to its starting position, which is vertically centred in the containing `div`, and hide it.
4.  Determine when to show the label by using a combination of the `:not`, `:focus` and `:placeholder-shown` pseudo classes:
    1.  If there’s no placeholder shown, then show the label — `input:not(:placeholder-shown) + label`
    2.  If the input is focused and the placeholder isn’t shown, then show the label — `input:focus:not(:placeholder-shown) + label`

With that in mind, let’s get to the HTML & CSS!

## Building it all

After digesting all this info, the build is actually pretty simple. Here’s the markup I came up with:

```html
<div class="Input">
  <input type="text" id="input" class="Input-text" placeholder="Your first name, e.g. Nicholas">
  <label for="input" class="Input-label">First name</label>
</div>
```

And here’s the CSS scaffolding with some comments about what’s happening at each step. The final demo down below has the full CSS, which is written up with [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for easy modification and maintenance.

```css
.Input {
  /**
   * Relative positioning on the wrapper is important, beecause we'll use the
   * wrapper to position the label in default and floated positions.
   */
  position: relative;
}

.Input-text {
  /**
   * Input text styles here. The font size and line height of the input are
   * important for determining precise positioning of the label. These will be
   * stored in CSS variables eventually.
   */
  display: block;
  margin: 0;
  width: 100%;
  /**
   * These props will be added in the demo once variables are defined:
   *
   * padding
   * font-size
   * line-height
   */
}

.Input-text:focus {
  /**
   * Focused input styles here.
   */
}

.Input-label {
  /**
   * The label gets absolute positioning, and a calculated set of  sizes,
   * positioning, and transforms, based on relativity to the container element
   * and input text styles.
   */
  display: block;
  position: absolute;
  opacity: 0;
  /**
   * These props will be added in the demo once variables are defined:
   *
   * bottom
   * left
   * font-size
   * line-height
   * transform
   * transform-origin
   * transition
   *
   * They will give the label default positioning and styling.
   */
}

.Input-text:placeholder-shown + .Input-label {
  /**
   * While the placeholder is visible, we want to hide the label.
   */
  visibility: hidden;
  z-index: -1;
}

.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
  /**
   * While the placeholder is not shown - i.e. the input has a value - we want
   * to animate the label into the floated position.
   */
  visibility: visible;
  z-index: 1;
  opacity: 1;
  /**
   * These props will be added in the demo once variables are defined:
   *
   * transform
   * transition
   *
   * They will give the label floated positioning and styling.
   */
}
```

## Full Demo In Action

If any of the above was unclear, here’s a full working demo in action for you to take a look over!

## Browser Support

Support is pretty good so far, with IE & Edge falling behind:

* **Chrome:** 47+
* **Firefox:** 51+
* **IE:** No support
* **Edge:** No support
* **Opera:** 34+
* **Safari:** 9+

You can get around lack of support by using some [fun CSS browser hacks](http://browserhacks.com/) to target IE and Edge browsers for some conditional styles to the input and label.

## Wrap Up

And that’s a wrap! I love when I discover new things in CSS, but I love even more when I can find neat ways to make them applicable. I hope you learned something and can come up with fun new ways to use the `:placeholder-shown` pseudo class. Thanks again for reading, and if you have and questions, comments, or feedback, feel free to reach out.

CSS Only Floated Labels with :placeholder-shown pseudo class

A few days ago, I ran into a little problem when using SVGs. I'd created a reusable set of SVG symbols for a project I was working on, and started sprucing it up with all the pretty icons my designer gave to me. As we all know, one of the biggest benefits to using **S**VG is the “scalable” part of it, meaning that graphics render perfectly at and size, no matter the original size of the graphic. I'm a huge fan in general of SVG, and implementing them into this project was a no brainer for me.

However, a few of the icons in the design consisted of strokes, and those strokes were always `1px` in width, no matter the size. When you scale an SVG, it scales everything about it, so an icon that's scaled up two times would have stroke widths that are double the size of the original. One such example was a “+” icon that indicated there was more content. I had to reuse that icon at small and large sizes, but:

1.  I wanted the stroke width at all sizes to be `2px`
2.  I wanted to create one graphic that I could reuse at any size without scaling the stroke width

## Enter The Vector Effect Attribute

One of my favourite things about programming is being faced with a problem. It challenges you to research and find solutions. In this case, I stumbled upon the [`vector-effect` attribute](https://web.archive.org/web/20170727101027/https://www.w3.org/TR/SVGTiny12/painting.html#VectorEffectProperty), which conveniently has `non-scaling-stroke` as one of its values. It does exactly what it says, i.e. prevents strokes from scaling as an SVG scales.

My original SVG symbol looks something like this:

```html

<svg>
  <symbol id="Icon-plus" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2"/>
    <path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
    <path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
  </symbol>
</svg>


<svg width="50" height="50">
  <use xlink:href="Icon-plus"/>
</svg>
```

Notice how the `viewBox` dimensions are perfectly aligned with the `width` and `height` dimensions. With this version of the icon, the `2px` wide stroke displays at `2px`, as expected. However, if I reuse that icon elsewhere at a bigger size, like this:

```html
<svg width="200" height="200">
  <use xlink:href="Icon-plus"/>
</svg>
```

I'd see a scaled up icon including scaled up effects. This one's dimensions are 4 times the size of the original view box. As such, the stroke would render at `8px`. In order to circumvent this, I added the `vector-effect` attribute to the paths on the original graphic, and set the value to `non-scaling-stroke`, like this:

```html
<circle vector-effect="non-scaling-stroke" />
<path vector-effect="non-scaling-stroke" />
<path vector-effect="non-scaling-stroke" />
```

Now, at any size, the stroke would render at `2px` as desired!

## Wrap Up

And that’s a wrap! I really wanted to share this simple tip with you as it's served me beautifully in recent times. Thanks again for reading, and if you have and questions, comments, or feedback, feel free to get in touch.

SVG Vector Effects

Transitions and animations are making waves across web development, and rightfully so. They are awesome, easily useable (and abusable), and have the ability to take your front end components and interfaces from good to great. The anatomy of declaring transitions and animations are similar, and only two things are required:

1. In the case of transitions, you select the property you want to transition. For animations, you select the keyframe block.
2. You then declare the duration length for the animation or transition.

Some typical CSS might look like this:

```css
.box {
  opacity: 0;
  transition: opacity 0.3s;
}

.cat {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
```

Transitions and animations also have another shared property that controls how the intermediate values between states are calculated, and that's called the [transition timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function). It's optional, and defaults to `ease`. The following timing functions are available to us by default:

- `ease` - speeds up a little through the middle, and then slows down towards the end
- `ease-in` - starts of slowly, and accelerates through to the end
- `ease-out` - starts of quickly, and decelerates through to the end
`ease-in-out` - starts slowly, accelerates through to the middle, then decelerates through to the end
- `linear` - constant animation speed throughout
- `step-start` - steps to the final state in the first frame of the animation
- `step-end` - steps to the final state in the last frame of the animation
- `steps(n, start|end)` - steps through n frames for the duration of the animation, "eating" a frame either at the start or the end

When dealing with simple animations and transitions, it's unlikely that you've touched the `step` functions - those are more geared towards keyframe cartoon-style animations, which is a very specific use case. However, you've probably used a lot of the other built in timing functions to reasonable effect when building nicer buttons, menus, modals, and other stateful components. Have you ever thought that despite the induced animation effect, it doesn't look and feel quite right?

## Cubic Bezier to the Rescue!

Let's digress a little bit. Anyone with any animation experience will know that software like Flash and After Effects come packed with a ton of easing functions - `easeInQuint`, `easeOutSine`, `easeInOutCubic`, just to name 3 of many. These timing functions aren't available to us through CSS keywords like `ease` and `linear`. However, it's important to note that **all** of these functions, including the ones that have valid keywords in CSS, are just cubic bezier functions. But what exactly is cubic bezier? Let's take a look at the image below:

![Cubic Bezier Chart](//images.ctfassets.net/rex0us6r928o/5zok0XEii8prWZPO6mEPUG/d2c17e88a883b199c9c7767d6ab15eeb/bezier.png)

It's a graph that lives on a 1x1 axis, and it represents the cartesian cubic bezier coordinate system. Side note: plot points on this graph can go above and below 1 on the y-axis (property axis), but not on the x-axis (time axis). The grey line represents the axes, the orange line represents the timing function curve, and the blue lines and dots represent the control points and lines of the bezier curve. These control points are responsible for shaping the curve itself, and are one of the fundamental underlying concept in vector graphics softwares such as Adobe Illustrator.

A specific type of bezier curve - the cubic bezier curve - is available to us in the field of animation, and it can be mathematically defined by four control points in the plane of the graph shown above. In world of CSS animations though, we're only concerned with control points `p1` and `p2`, and that's because `p0` is always going to be `0, 0`, and `p3` is always going to be `1, 1`. So how then do we define out cubic bezier function in CSS? It looks like the following:

```css
cubic-bezier(x1, y1, x2, y2)
```

where:

* `x1` is the x coordinate of control point `p1`
* `y1` is the y coordinate of control point `p1`
* `x2` is the x coordinate of control point `p2`
* `y2` is the y coordinate of control point `p2`

I created the graph above just as a demonstration, but you can imagine that the cubic bezier declaration for it might look something like this:

```css
cubuc-bezier(0.5, 0.31, 0.84, 0.05)
```

If you're good with numbers, or you have a grasp of bezier curves or animation functions in typical animation software, you may immediately see the immense power this gives us. Think about it this way, animations are supposed to tell a story and give context and mood to the state we're animating to. If every animation was linear or a normal ease, they would all look the same, and invoke the same mood. If a very important dialog were to appear after a user action, and you really wanted to draw some attention to that, you'd probably want a custom timing function. Cubic bezier curves give us this fine tuned control.

## I'm No Good with Numbers - Help

If you're no good with numbers or are having a hard time visualizing what the end result will look like, then fear not. There are many resources out there to help you. First and foremost, a quick Google search will yield heaps of results on traditional easing functions ported to their CSS cubic bezier equivalents. However, two excellent resources that I use are:

1. [easings.net](http://easings.net/) - A collection of traditional easings (timing functions) and their corresponding CSS cubic bezier implementations
2. [cubic-bezier.com](http://cubic-bezier.com/) - A playground and visual interface for making your own cubic bezier functions, and seeing the results in real time.

Both are excellent, and you'll likely use them together.

## A Little Example

Let's demo up a little example to compare two timing functions. Below, there are two blue boxes of the exact same size. When you hit the animate button, they will translate 20rem from left to right for a duration of 600ms. Everything about them is the same, except the easing functions. The first one takes on the function **ease in**, which is accessible via the CSS keyword `ease-in`. The second takes on the function **ease in out back**, and you can grab the cubic bezier function from [easings.net](http://easings.net/). Below is the result:

I don't know about you, but in my opinion, the second animation has a lot more character! Putting in just a little bit more effort yielded amazing results.

## Wrap Up

Understanding cubic bezier curves is one part of the equation of mastery of CSS animations. Putting them to use is another part. Always remember though that animation is not just a slap-and-go tool, and you shouldn't abuse it. Animation is a long practiced art, and we should treat it with respect and research accordingly. Timing functions all invoke different meanings to the subject, and it's up to you to make sure you're sending the right message. Cubic beziers can dramatically help this, so get acquainted. And that’s a wrap!

Level Up Your CSS Animations with Cubic Bezier

As CSS continues to evolve, interesting selectors and functions are always on the horizon. One that I came across some time ago is the `calc()` function, which allows you to actually perform a unit calculation and return a result. The real beauty in it for me though is that you can mix and match unit types, offering interesting ways to compute layout dimensions, particularly when building responsive layouts. In following snippets, we'll look at some very basic implementations of the `calc()` function, then step it up a notch with a real world scenario, implementing a neat calc-based solution to it. Let's dive in!

## Basic Implementation

In its most basic form, the `calc()` function takes on some values and returns the calculated dimension. According to the W3C:

> The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (\*), and division (/) to be used as component values. The `calc()` expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever `<length>`, `<frequency>`, `<angle>`, `<time>`, `<number>`, or `<integer>` values are allowed.

So in essence, we could do something like this:

```css
.element {
  margin: calc(20px - 10px);
}
```

This of course is a totally useless example, because you can easily just set the margin to 10px to begin with. But it does give us a simple insight into what `calc()` can do. As I mentioned above, the function allows us to mix and match units, so something like this becomes possible too:

```css
.element {
  margin: calc(2em - 5px);
}
```

Again, this example might not be the best, but we're opening up ourselves to the power of the function. Because we're allowed to perform 4 mathematical operations, we can even get all weird and needlessly complicated with something like this:

```css
.element {
  margin: calc(10%/2em + 10px*4rem);
}
```

I'm not sure why you'd do something like this, but again, this is just an eye opener for you. Let's move on to that real-world scenario where `calc()` can help out greatly.

## Stepping It Up A Bit

Here's the scenario. We want to build a simple fixed-sidebar fluid-content layout. So imagine we have some markup like this:

```html
<div class="container">
  <div class="fixed">I am fixed</div>
  <div class="fluid">I am fluid</div>
</div>
```

You might want a fix-sized margin of 40px in between the two columns, so leveraging some negative margin and padding techniques, you'll probably do some math. I'd first set the size of the fixed column, add that to the desired fixed margin, pad the container, apply a negative left-margin on the fixed element, apply the right margin, and float the two elements. Exhausting, tough to change, but hey, it works. Here's the CSS:

```css
.container {
  padding-left: 340px;
}

.fixed,
.fluid {
  float: left;
}

.fixed {
  margin-left: -340px;
  margin-right: 40px;
  width: 300px;
}

.fluid {
  width: 100%;
}
```

What if now, we wanted to change the width of the fixed margin, or the fixed column size? We'd have to do over the calculations again, and re-apply. It can get tricky. Sass might be able to save us here, but what if we're not using Sass? Let's turn this up a little bit with the calc function and see how we can avoid the excessive calculations. Above, we made use of a 40px fixed margin, so let's do the same this time. Here's how simple this layout becomes:

```css
.container {
}

.fixed,
.fluid {
  float: left;
}

.fixed {
  width: 300px;
}

.fluid {
  margin-left: 40px;
  width: calc(100% - 340px);
}
```

Notice now that we don't even need to pad the container anymore, and there are no negative margins involved. We have one simple math calculation to make before setting up our CSS, and that's it.

Now, with flexbox coming of age amongst many other neat grid-type CSS formulas, the above might still seem a tiny bit dated. But calc plays nicely with flexbox, and based on experience, can come quite in handy there too. Nonetheless, the CSS above represents a completely valid and helpful use-case of the `calc()` function.

## Support

[Support is quite high for this](http://caniuse.com/#search=calc), and if you're mindset is in the modern sphere of things and your target audience is accessing your site/app from modern browsers, then there's no reason not to implement it in your projects today. It is a [candidate recommendation on the W3C](http://www.w3.org/TR/css3-values/), and due to it's incredible usefulness, it's here to stay.

## Wrap Up

That’s all, folks. Are you using the CSS `calc()` function? I'd love to hear about it and see an example, so feel free to reach out and let me know. Thanks again for reading, and if you have and questions, comments, or feedback, feel free to reach out.

The CSS Calc Function and Some Uses

In this tutorial, we're going to take an in-depth look into CSS perspective, and some use-cases where it can give users more natural and cool experiences.

## What Is Perspective?

In the context of the two-dimensional world, perspective gives users the illusion of an object’s depth, width, height, and position in relation to another object, when viewed from a particular point. Perspective allows artists to create scenes that look like they are going “into” the paper, or draw buildings of different sizes on a street moving away from our position. Objects will also have a vanishing point, which is the point in the 2-D plane where an object’s depth vanishes. Let’s illustrate this with a simple diagram:

![Vanishing Point](//images.ctfassets.net/rex0us6r928o/5MVbwtQi0NAu9GjgfmzldB/2d222c2c92b7f9a36be608dd44da0721/vanishing-point.png)

The above diagram depicts three objects, all rectangles, in a 2-D plane. When they are moved around the plane, lines of perspective can be drawn towards the vanishing point, and 3-dimensional objects can be extrapolated.

Since the web is viewed on two-dimensional surfaces (i.e. device screens), perspective can play a part in helping to create some similar depth. In the world of web and CSS transforms, perspective is defined like this (taken from the MDN):

> The perspective CSS property determines the distance between the z = 0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z > 0 becomes larger; each 3D-element with z < 0 becomes smaller. The strength of the effect is determined by the value of this property.

The vanishing point is placed by default at the centre of the element, but we can reposition it with the `perspective-origin` property. Let’s look at a basic example.

## Demo 1 – A Basic Perspective Example

Let’s take a very primitive shape – a square – and use the perspective properties to give it a bit of depth. For the first sequence of demos, I’ll use some helper classes to show-off the following perspective ranges:

*   no `perspective`
*   100px `perspective`
*   200px `perspective`
*   `perspective-origin` at `[0, 0]`

Note that perspective properties must exist on the parent container of the element we want affected. With that in mind, the markup for the three demos will be really simple:

```html
<div class="perspective-container perspective--none">
  <span class="surface"></span>
</div>

<div class="perspective-container perspective--200">
  <span class="surface"></span>
</div>

<div class="perspective-container perspective--100 perspective-origin--00">
  <span class="surface"></span>
</div>
```

Let’s now apply the necessary CSS perspective properties:

```css
.perspective-container {
  width: 200px;
  height: 200px;
  background-color: #eee;
}

.perspective--none {
}

.perspective--100 {
  perspective: 100px;
}

.perspective--200 {
  perspective: 200px;
}

.perspective-origin--00 {
  perspective-origin: 0px 0px;
}

.surface {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #377CFF;
}
```

If we refresh our browser, we will see three identical squares. Why? Because none of our objects have actually moved in the perspective plane. To see how the perspective properties affect our objects, let’s translate them along the z-axis into the plane using `transform`. We’ll add the following CSS to our `.surface` class that governs our objects:

```css
.surface {
  transform: translateZ(-50px);
}
```

Now, we can see three different results:

1.  The first remains unchanged, because without any perspective rules in place, translating along the z-axis (i.e. in and out of the screen) causes no change in depth.
2.  The second appears to have moved into the screen a bit, because we set the `perspective` to `200px`. Remember from the definition above that the perspective property determines the distance between the `z = 0` plane and the user.
3.  The third appears even smaller still, and has moved to the top-left corner of our perspective container. This is because of the `perspective-origin` property set on the parent container.

Here it is in action:

## Demo 2 – Rotating Shapes With Perspective

At this point, the above effects could’ve just been achieved by simply scaling the elements. That’s a fair point, but in that case, we’d lose all perspective properties. Visualizing the perspective in the first demo might also be a bit difficult because ultimately, it’s just a smaller square. Let’s look at a slightly more advanced implementation, and paint a clearer picture.

This time, we’ll have the same three squares, but we will rotate them about the y-axis, making them rotate “into” the screen. We will use a CSS transition effect coupled with the `:hover` pseudo-class to animate how perspective properties affects the rotation. Here’s the markup:

```html
<div class="perspective-container perspective--none">
  <span class="surface"></span>
</div>

<div class="perspective-container perspective--400">
  <span class="surface"></span>
</div>

<div class="perspective-container perspective--400 perspective-origin--00">
  <span class="surface"></span>
</div>
```

This time, I added a perspective helper class at `400px` also like this:

```css
.perspective--400 {
  perspective: 400px;
}
```

Finally, let’s take a look at the CSS for our new shape:

```css
.surface {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #377CFF;
  transition: transform 1s;
}

.perspective-container:hover > .surface {
  transform: rotateY(180deg);
}
```

Hovering over the three different implementations results in three different outcomes:

1.  With no `perspective` set, the object rotates about the z-axis in a very flat manner. Nothing seems to pop in our out of the screen.
2.  When we set `perspective` to `400px`, we can see that the object now looks like it is spinning out and back into the screen. This is because of `perspective`.
3.  With the `perspective` set to `400px` and the `perspective-origin` moved to `[0 0]`, a similar effect to number 2 is achieved, but this time viewed from the perspective origin.

Here it is in action! Now, we’re starting to see the power of CSS perspectives.

## Demo 3 – 3D Cube With Variable Perspective Origins

Now, we’re going to get a little funky. We’re going to create a cube (with 6 faces) using CSS `transform`, and give that cube some depth using `perspective`. We will also set up a controller system so that we can edit the perspective and perspective origin on the fly, giving us a superior grasp on how perspective really affects everything.

We’ll set up our cube using 6 different `span` elements inside a parent `div` with the class of `cube-face`. Each `cube-face` will represent a different face of the cube. The cube itself will now reside inside a perspective `div`, called `cube`. Here’s the markup:

```html
<div id="cube" class="cube">
  <div class="cube-faces">
    <span class="cube-face cube-face--front"></span>
    <span class="cube-face cube-face--back"></span>
    <span class="cube-face cube-face--top"></span>
    <span class="cube-face cube-face--bottom"></span>
    <span class="cube-face cube-face--left"></span>
    <span class="cube-face cube-face--right"></span>
  </div>
</div>
``` 

We’ll set up some defaults for the perspective wrapping container, and the cube container will have relative positioning so that each of the cube faces can be absolutely positioned inside, and transformed accordingly. Assuming we want a cube where each side is `200px` in length, our CSS will look like this:

```css
.cube {
  perspective: 1000px;
  perspective-origin: 0px 0px;
}

.cube-faces {
  position: relative;
  margin: 100px auto;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}
```    

Notice that I initially set the `perspective` to be `1000px`, and the `perspective-origin` to be `0px 0px`. This will give us some depth to work with initially so we can see transformed objects moving into and out of the plane. Remember, without `perspective`, transformed objects would not achieve that third-dimensional depth that we’re after.

Let’s examine the faces of the cube now. First of all, each face needs to be absolutely positioned and have a `width` and `height` of `200px`. I’ll apply some inner shadows to each face also, for visualisation purposes. Here’s the common CSS for the faces:

```css
.cube-face {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 200px;
  height: 200px;
  background-color: rgba(#377CFF, 0.3);
  box-shadow: inset 0 0 0 2px #fff;
}
``` 

Now, let’s look at each individual face. We set up our cube to be `200 x 200 x 200`. But we want to give some depth in general. So let’s pull the front face towards us by `100px` and push the back face away from us by `100px`, leaving us with that perfect `200px` square as the center plane of our cube on the x-y axis. The back face should also be rotated `180deg`, so that it is facing outwards. So we’re translating each face first, then rotating where necessary. Here’s the CSS:

```css
.cube-face--front {
  transform: translateZ(100px);
}

.cube-face--back {
  transform: translateZ(-100px) rotateY(-180deg);
}
```    

Now, let’s look at the left and right faces. The left face needs to be translated to the left by `100px`, then rotated by `–90` degrees about the y-axis. The right face does the opposite. These rules will get them into position:

```css
.cube-face--left {
  transform: translateX(-100px) rotateY(-90deg);
}

.cube-face--right {
  transform: translateX(100px) rotateY(90deg);
}
```

Now, let’s take a look at the top and bottom faces. The top face needs to move upwards `100px`, and rotate about the x-axis by `90` degrees, while the bottom needs to to the opposite. These rules place them in position:

```css
.cube-face--top {
  transform: translateY(-100px) rotateX(90deg);
}

.cube-face--bottom {
  transform: translateY(100px) rotateX(-90deg);
}
```

And voila, now we have our CSS cube, using transforms and perspective! Let’s take it a step further though add some controls now that will allow us to change `perspective` and `perspective-origin` on the fly. I’ll use the range `input`, and wire up three of them to handle the respective properties. Here’s the markup:

```html
<input id="p" type="range" min="500" max="5000" value="1000" step="1">
<input id="pX" type="range" min="-5000" max="5000" value="0" step="1">
<input id="pY" type="range" min="-5000" max="5000" value="0" step="1">
```

And here’s some JavaScript to give us a playful little demo:

```javascript
var cube = document.getElementById('cube');
var p = document.getElementById('p');
var pX = document.getElementById('pX');
var pY = document.getElementById('pY');
var pVal;
var xVal;
var yVal;

p.addEventListener( 'input', function() {
  cube.style.perspective = `${p.value}px`;
});

pX.addEventListener( 'input', function() {
  cube.style.perspectiveOrigin = `${pX.value}px ${pY.value}px`;
});

pY.addEventListener( 'input', function() {
  cube.style.perspectiveOrigin = `${pX.value}px ${pY.value}px`;
});
```

And now, we have an interactive demo of a 3D cube, creating using CSS3 transforms and perspectives. The demo should truly give you a grasp on how perspective is handled in the browser. Check it out here below!

## Browser Support

Perspective, transitions, and animations are supported in IE10 and up, whereas transforms are supported in IE9 and up. Fallbacks should be easy to implement as a result of this. I tested all the code above in new versions of Chrome, Safari, and Firefox, so you’re safe there. Make sure to add all then necessary vendor prefixes though!

Wrap Up
-------

And that’s a wrap! We’ve just taken an in depth look at CSS3 perspective, and some of the possibilities available when combining perspective with transforms, transitions, and animations. Thanks again for reading, and if you have and questions, comments, or feedback, feel free to get in touch.

.css-5tz8fq{color:var(--chakra-colors-gray-900);-webkit-text-decoration:none;text-decoration:none;}.css-5tz8fq:hover,.css-5tz8fq[data-hover]{color:var(--chakra-colors-gray-900);}CSS Sticky Footer with Flexbox and Grid

CSS Only Floated Labels with :placeholder-shown pseudo class

SVG Vector Effects

Level Up Your CSS Animations with Cubic Bezier

The CSS Calc Function and Some Uses

CSS Transitions, Transforms & Animations – Perspective

CSS Sticky Footer with Flexbox and Grid