Follow this guide to learn how to add a transform to a website using the transform
CSS property!
Follow these steps to set up a new project for transforms.
class
attribute to the second <p>
element that says “Style this paragraph…”class
to be update
<style></style>
element.update
as the selector{
and }
)At this point, the added code should look something like this:
HTML
<p class="update">Style this paragraph...</p>
CSS
.update {
}
The project should be ready for styling.
The cool thing about the transform
property is that there are a ton of different possibilities. You can do things like rotate, scale, move, and skew! This guide will only show one of the functions - the skewY
function.
<style></style>
element.update
ruleset (between {
and }
), create a new property declaration with transform
transform
property to be skewY(-20deg)
Load up the page, and see the text skew The code in the <style></style>
element should look something like this:
.update {
transform: skewY(-20deg);
}
Try playing around with the different values to see where it leads. Some different functions to try include rotate
, scale
, translate
, and perspective
.
Click here for an interactive transform
generator tool! This site will allow you play around with the different possibilities, and will give you code to copy and paste at the end.