Transforms

Introduction to Transforms

The CSS property transform allows one to rotate, scale, skew, or translate an element. Basically, it modifies the coordinate space of the CSS visual formatting model.

The examples below outline transform operations performed on a bunch of <h3> blocks contained within a <section> block. In all, there are 4 h3 elements contained within 2 sections.

To include CSS code on your page, wrap the code in a <pre> element, and use the <code> element inside of it. This will preserve the formatting of the code and make it easier to read

Initially, the h3 elements are all centered according to the following CSS code:

        
            h3 {
                background-color: #2a9d8f;
                border: 5px solid #264653;
                color: #eae2b7;
                padding: 0.7em;
                width: 300px;
                font-size: 1.8em;
                text-align:center;
                margin: 20px auto;
                font-family: Courier New;
                font-weight: lighter;
            }

One new topic from the above is the use of margin:auto; By using margin:20px auto; this means that we have a margin of 20px top and bottom, but more importantly, the use of auto centers an element in its container! So, when you see margin:auto; (or the other variations), that means we're centering the element in its container - by automatically distributing the margin to the left and right.

As well as the above, we have changed the colors of alternate elements according to the following code:

        
            h3:nth-of-type(2n) {
                background-color: #e9c46a;
            }
            h3:nth-of-type(3n) {
                background-color: #f4a261;
            }
            h3:nth-of-type(4n) {
                background-color: #e76f51;
            }

This allows us to distinguish between what we're changing more easily. In the 8 different h3s in the page, can you work out what transform operations were performed? As an aside, the transform-origin property is addressed but not used in this document. As you might imagine, this merely sets the origin point (or point around which a transformation is applied).

Of particular note:

In terms of performance, using transform is better than using a bunch of padding/margin properties to move things around
Overall, the rotate() function is very useful to transform the rotation of the element.
scale() is especially good when we when we resize our horizontal and vertical dimensions at different scales.
translate() is used to reposition the element along the x and/or y axes. Note that positive values for x or y will push the element rightwards and downwards, respectively
The skew() function is a way of skewing an element on the 2D plane.

Transform me!

Firstly, we used the following code to rotate the first element in the first <section> by 45 degrees. Note how the first-of-type and nth-of-type pseudo-classes are being made use of! There are other types of rotations, such as rotate 3d, rotate X, rotate Y and so on.
```
            
                section:first-of-type h3:nth-of-type(1){
                    transform:rotate(45deg);
                }
            
        
```
The second example changed the scale of the element to 60% of its original size. We can use transform:scale() to do this! While it's common to use 1 number, we can morph the shape completely by adjusting the x and y values like so: transform: scale(1.3, 0.4); This has the potential to create very distorted and ugly shapes, but you might find it useful one day!
```
                
                    section:first-of-type h3:nth-of-type(2){
                        transform: scale(0.6);
                    }
                
            
```
The 3rd (and 4th) examples make use of a translate() function. There are various types, such as the translate(), translateX(), translate3D() and so on. It's another way of changing the position of an element. In this example, the position along the X-axis has been changed to 200px. A positive value for translateX() moves it from the left to the right.
```
                
                    section:first-of-type h3:nth-of-type(3){
                        transform: translateX(200px);
                    }
                
            
```

The fourth example uses a translate() function with both X and Y values inserted. As you can see, positive values for X and Y will move the element to the right and down respectively.

                
                    section:first-of-type h3:nth-of-type(4){
                        transform: translate(-100px, 50px);
                    }

Example 5 uses the skew() function. Using one value in the function will skew the element along the x-axis.

                
                    section:nth-of-type(2) h3:nth-of-type(1){
                        transform:skew(30deg);
                    }

That said, skew() can be specified with either one or two values, which represent the amount of skewing to be applied in each direction. Example 6 demonstrates how to skew the element along both axes.
```
                
                    section:nth-of-type(2) h3:nth-of-type(2){
                        transform: skew(10deg, 5deg);
                    }
                
            
```

The 7th example is just showing how we can combine multiple transform functions at once, in this case, the rotate and scale functions.

                
                    section:nth-of-type(2) h3:nth-of-type(3){
                        transform: rotate(-20deg) scale(1.3);
                    }

The 8th example does something very similar to the previous example!

                
                    section:nth-of-type(2) h3:nth-of-type(4){
                        transform: translateX(-500px) rotate(0.5turn) scaleY(1.5);
                    }

Finally, and independent of the above, it's possible to perform further transformations on the section as a whole!

            
                section:nth-of-type(2) {
                    transform: scale(0.7) translateX(500px);
                }

Now, we'll try a fancy Hover Button