It even became abstracted out and popularised in jQuery with the animate() method. Moving an element from one position to another had long been possible by using JavaScript and modifying the margin property or left and top repeatedly. The transforms spec first appeared in the age of the smartphone as users became used to views sliding in and other small transitions. When we can already position and size items many other ways in CSS, why do we even need transforms as web developers? There are a few reasons, but the biggest is the ability to combine them effectively with transitions and animations. When this spec is finalised and lands in browsers we will be able to break out simple transforms like this: They will follow a predefined order, though, so you lose some flexibility. See the Pen Order of Transforms by Dan Wilson ( on CodePen.Īll of this being said, individual properties are in the pipeline and will provide a convenience when you only need to set one.
#Css transform how to#
If you check the browser’s current value of your transform through the JavaScript getComputedStyle(yourElement) it will be converted to a matrix() function (which is another function you can use if you are comfortable with matrices and how to work with them). Order can affect the end visual result, so it makes sense to keep them inside the same property. The primary answer is that all of these transform functions boil down to matrix multiplication (a key piece of Linear Algebra and common in computer graphics). This structure grants us a fair amount of flexibility, but one of the first thoughts people often have is why do we cram everything in one property instead of having separate properties. You can even use the same functions multiple times, such as with transform: translateX(20px) rotate(.25turn) translateX(30px).
The property accepts multiple functions at a time, so you can apply both a scale and a rotation with transform: scale(2) rotate(20deg). The transform property does a lot already, but we have only focused on how to apply a single transformation. But there is plenty to dig into with just the 2D world. Once you have a handle on these key functions you can explore the 3D equivalents (such as translate3d())and perspective to get a level of depth. See the Pen SkewX/Y Options by Dan Wilson ( on CodePen. This uses a similar angle unit to the rotations inside the functions skewX() and skewY(). See the Pen Rotation Options by Dan Wilson ( on CodePen. These all move in the clockwise direction for positive values and counterclockwise for negative values. Then there are rotations using angle units such as deg, rad, or turn. See the Pen Scale Options by Dan Wilson ( on CodePen. Extra fun comes when you start throwing in negative numbers to get flips. You can also scale horizontally to stretch your element with scaleX() or vertically with scaleY(). A number between 0 and 1 will be a fraction of the original size, and a larger number will be bigger than the default size. It accepts a single number, where scale(1) represents no change. You can also make your elements bigger or smaller with the scale() function. You can use the functions translateX() and translateY() as well if you want to separate them out or only use one direction. With this HTML, the inner div will appear 15px to the right of where its default position was. See the Pen Transforms and Flow by Dan Wilson ( on CodePen.Įlements that appear inside will move with its parent, and you can have nested transforms too. Visually the element is moved to its new position, but it does not affect the flow of elements that appear later. The important piece to note is that before the transformation is applied the box is rendered according to the normal layout flow. Here our CSS will take the element as it is and shift it to the right 5px and down 10% of its size. The most straightforward one to jump into is the translate() function since it is related to positioning and uses the length units you find in more common properties like margin and top. The value for the property consists of one or more transformation functions that build on one another. Let’s discuss some of the basics and then dive into a handful of use cases. 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. This all comes to us via the transform property. 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).
0 kommentar(er)
