If we give two arguments to scale() (separated by a comma), the first argument specifies the horizontal scaling and the second specifies the vertical scaling: See the Pen CSS transform: scale 2 by HubSpot ( on CodePen. See the Pen CSS transform: scale 1 by HubSpot ( on CodePen. If we provide one argument with scale(), we increase or decrease the size of the element by a multiple of its original size. The scale() transform method changes the size of the target element. See the Pen CSS transform: translateY by HubSpot ( on CodePen. Similarly, the translateY() method moves an element vertically. See the Pen CSS transform: translateX by HubSpot ( on CodePen. translateX() moves an element only horizontally, and takes one argument: In addition to translate(), we can also use the translateX() and translateY() methods. See the Pen CSS transform - percentages by HubSpot ( on CodePen. In the example below, the orange div is transformed by 100% of its width and 50% of its height: Percentages move the element a horizontal distance proportional to its width, or a vertical distance proportional to its height. You can also use percentages to specify the translation. Using negative numbers with the translate() method will move the element left or up: See the Pen CSS transform - pixels by HubSpot ( on CodePen. In the example below, the orange div has been translated 100 pixels to the right and 75 pixels down: In the parenthesis, the first number specifies the horizontal distance, and the second number specifies the vertical distance.įor example, we can translate our div by a specific number of pixels. The translate() method translates (or moves) a page element up, down, left, and/or right on the page by a specified amount. The blue div will be untransformed, and the orange div will show the same element with the transformation effect applied. It will scale, translate, then rotate the element.In my examples, I’ll apply the transformation effects to a basic square-shaped div. The following transform property isn’t too complicated. Neither of them is immediately obvious when starting out. ![]() In order to understand the benefits of individual transform properties, let’s first look at the two key challenges they’re trying to address.
0 Comments
Leave a Reply. |