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 - CSS Tutorial
From the course: CSS: Transforms and Transitions
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.