With a single line of CSS we can completely reorient any element on our page – we can move it, rotate it, resize it, or send it into another dimension (to an extent). This all comes to us via the transform property. While it is a single property, a lot of functionality is packed into it, and it can be confusing how all its values combine to create its end result. Let’s discuss some of the basics and then dive into a handful of use cases.<\/p>\n
The value for the property consists of one or more transformation functions that build on one another.<\/p>\n
The most straightforward one to jump into is the Here our CSS will take the element as it is and shift it to the right 5px and down 10% of its size. The important piece to note is that before the transformation is applied the box is rendered according to the normal layout flow. Visually the element is moved to its new position, but it does not affect the flow of elements that appear later.<\/p>\n See the Pen Transforms and Flow<\/a> by Dan Wilson (@danwilson<\/a>) on CodePen<\/a>.<\/p>\ntranslate()<\/code> function since it is related to positioning and uses the length units you find in more common properties like margin<\/code> and top<\/code>.<\/p>\n.my-element {
\ntransform: translate(5px, 10%);
\n}<\/code><\/p>\n