From the course: CSS: Transforms and Transitions

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

The 2D transformation styles

The 2D transformation styles - CSS Tutorial

From the course: CSS: Transforms and Transitions

Start my 1-month free trial

The 2D transformation styles

- [Instructor] In this video, I'm going to show you the CSS styles for performing transformations. Transformation is a property that alters the appearance of a page element by changing its size, moving it to another location on the page, or rotating it, sometimes doing all three at once. This video will focus on transformation styles that apply in two dimensions, which we'll designate as the X or horizontal direction and the Y or vertical direction. Every transformation style is applied using the following transform property, where effect is the type of transformation function and parameters are any parameter values associated with that function. This demo highlights all of the 2D transformation functions supported by CSS. Let's take a minute to explore the function library. The translate functions shown here move the object either horizontally along the X axis or vertically along the Y axis. Or using the translate function, we can move the object both horizontally and vertically. The…

Contents