Code a Skewed Card Design Using CSS 2D Transforms
Tags: css, beginners, design
Published: 2019-08-11 18:00:41

---
cover_image: https://i.imgur.com/yyj2Kn4.jpg
---

## Introduction

[CSS 2D transforms](https://www.w3schools.com/css/css3_2dtransforms.asp) allow you to modify an element by its shape, size, and position. There are currently 9 methods you can use with the `transform` property:
* `translate()`
* `rotate()`
* `scaleX()`
* `scaleY()`
* `scale()`
* `skewX()`
* `skewY()`
* `skew()`
* `matrix()`

Today we'll be using `skewX()`, `skewY()`, `scale()`, and `rotate()` to create the following card design:

{% codesandbox xt4qe %}

**Note: you can also use `skew(x,y)` as a shorthand for `skewX()` and `skewY()`.**

Here's a step-by-step video below that you can watch if you'd prefer to follow along that way. Otherwise, each step is outlined below the video. Let's dive in!

{% youtube GHpq3gJYtmU %}

## Get Started

### Development Environment

We're going to be using [VS Code](https://code.visualstudio.com/) as the code editor with the [HTML5 Boilerplate](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate) and [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extensions installed. Also follow the quick documentation here to [launch VS Code projects from the command line using a Mac](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) in case you don't have that setup.

### Create the Project

Let's use the VS Code command line to create a project. Open VS Code and select _Terminal > New Terminal_. A terminal window will open at the bottom of VS Code. If you're new or need a refresher on terminal commands check out this [Mac Terminal Cheat Sheet](https://gist.github.com/poopsplat/7195274).

Head to the directory you'd like to create the project in using the `cd` (change directory) command followed by the directory's location. You can get an idea of what's available by typing `ls` (list) in the command line first. I will head to the Desktop by typing `cd Desktop/` and pressing return. If you need to go back a directory you can type `cd ..` in the terminal.

**Note: you can begin typing and then press Tab to autocomplete.**

We'll start creating the project by using the `mkdir` (make directory) command followed by the name of our project. We'll do `mkdir slanted-card`. Once that directory is made we need to go into it by typing `cd slanted-card/` and pressing return.

Inside the slanted-card directory we will create another directory for the `images` by typing `mkdir images` and pressing return. Then we'll create two files using the `touch` command: `touch index.html styles.css`. Now type `ls` in the command line to list everything in the slanted-card directory. You should see `images index.html styles.css` printed.

Next, type `code .` to open the project in a new VS Code window. 

**Note: you'll need to setup this `code` shortcut on a Mac using the [launch projects from VS Code documentation](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line).**

The last thing we need to do before we start writing the HTML is to import the logo into the `images` folder. You can [download the logo I used here](https://www.dropbox.com/sh/ne6w7rpelkdbdoy/AAAKpXLM0DsLBq1IeORE_83-a?dl=0) (3 more variations provided), but feel free to use your own. I recommend using SVGs of 20-25 pixels in height.

## Write the HTML

Open the `index.html` file in VS Code and start typing `html` and `html-boilerplate` should appear in the dropdown menu. Select this and press return and the HTML5 Boilerplate extension will insert boilerplate code to start your project. Feel free to fill out the title and description metadata, but it's not necessary for the design. However, it is important to import the `styles.css` file in the `<link rel="stylesheet" href="styles.css">` tag.

Get rid of everything between the opening and closing `<body>` tags that was inserted from the boilerplate extension. Inside the body tags write the following:

{% gist https://gist.github.com/hunterbecton/5b0ceff652055caa554f4870e4412a19 %}

There's not much going on here with the HTML, but I do want to point out that we're setting the source to the `.customer__picture img` to a direct Unsplash image URL.

In order to get the direct URL first head to [Unsplash](https://unsplash.com/) and find an image you want to use. Then right-click on the image and select _Open Image in New Tab_. 

At the top of the browser towards the end of the URL you will see a string that starts with `w=` followed by a number. You can change this number to the image width you want and press return to get the new image. Copy the entire URL and use it as the `src` for the `.customer__picture img`.

Let's get the project launched via Live Server. Right-click on the `index.html` file in the VS Code Explorer and select _Open with Live Server_. A new browser window will open and you'll see the HTML you just wrote! 🤘

## Write the CSS

In the beginning of this section we'll focus on the CSS for the general card design. At the end we'll create the skewed card effect using CSS 2D transforms.

### Import Google Fonts

Head here to grab the [Lato typeface from Google Fonts](https://fonts.google.com/specimen/Lato). In order to gain access to the Lato font we need to `@import` it at the top of the `styles.css` file. Here's how to get the code you need from Google Fonts:

{% youtube hcYjmWJ-J5A %}

Now just paste that code at the top of your CSS file.

**Note: be sure to only import the fonts and weights you need. The _Load Time_ metric helps ensure your project isn't importing too many fonts.**

### Add Resets and Body Styles

We'll start by adding simple [CSS resets](https://css-tricks.com/reboot-resets-reasoning/) and body styles:

{% gist https://gist.github.com/hunterbecton/3f3dada96b6f3d692cfc8c372e41cfd7 %}

**Note: the body styles are only necessary to center the card in the browser.**

### Add Card Styles

Let's add the styles for the basic card design:

{% gist https://gist.github.com/hunterbecton/881c65eb5b0a3cc44c1ef3c223fb01ea %}

Your design should now look like this:

![Simple UI Card Design](https://i.imgur.com/WUhScLo.png)

### Add CSS Transform Styles

We'll first add a `skewX()` and `skewY()` transform to the `.shape` style:

`transform: skewX(-5deg) skewY(-5deg);`

**Note: you can also you the shorthand `skew(x,y)`**

![Skewed Card Design Part 1](https://i.imgur.com/K8uAIcF.png)

Now the entire card will be skewed, including the image, logo, and text. In order to reverse the skew effect on these elements we will add a transform to them as well, but we'll add the opposite value. For example, if we set the skew to -5 on the card we will set a skew of 5 on each element we want to revert.

Let's start by adding a transform skew to the `.customer__picture img`:

`transform: skewX(5deg) skewY(5deg);`

You'll notice now that the edge of the image is now visible. To fix this we'll add the scale method to the image and scale it by 15%:

`transform: skewX(5deg) skewY(5deg) scale(1.15)`

![Skewed Card Design Part 2](https://i.imgur.com/PECuF5z.png)

The next element we need to fix is the `.text` class. So, we'll add the following:

`transform: skewX(5deg) skewY(5deg);`

![Skewed Card Design Part 3](https://i.imgur.com/MCspDO6.png)

The last thing we need to use transform on is the shape shadow. We want the shadow to be skewed by the same amount as the `.shape` class, but currently the skew on the `.shape` class is not affecting the shadow because the shadow is not a child of the `.shape` class. 

To fix this we'll add the following to the `.shape__shadow` class:

`transform: skewX(-5deg) skewY(-5deg);`

Now the shadow will be invisible because it's behind the shape. So we'll add a rotate method to the transform in order to make the shadow rotated and visible:

`transform: skewX(-5deg) skewY(-5deg) rotate(-20deg);` 

![Skewed Card Design Part 4](https://i.imgur.com/ijRSmeF.png)

And that's it! Now your final CSS should like like this:

{% gist https://gist.github.com/hunterbecton/d3602729eba3f1e4bd26321ecd3e0859 %}

## Continue Learning

If you made it this far, thank you! You can keep up with all my content on by [subscribing to the Skillthrive Youtube channel](https://www.youtube.com/channel/UCvHKiUI75ytqUcN851fRR2w?sub_confirmation=1). I have a number of courses on there that you can start watching for free, including a 3.5 hour course on [how to build a blog from scratch](https://youtu.be/4Wh5mTyn5WI) using React, Gatsby, and Contentful.