Example of a CSS3 2D transformation using the `scale()` function:
HTML:
<div class="box"></div>
CSS:
.box {
width: 100px;
height: 100px;
background-color: red;
transform: scale(1.5);
}
In this example, we have a `div` element with the class "box" that represents a square. The CSS rules for the "box" class include the following:
`transform: scale(1.5)` - This scales the element to 1.5 times its original size.
The `scale()` function allows you to resize an element on both the X and Y axes. In this case, the element will be scaled up to 1.5 times its original size.
You can modify the value within the `scale()` function to change the scale factor. For example, `scale(2)` would double the size of the element, while `scale(0.5)` would shrink it to half its original size.
Additionally, you can use separate scale factors for the X and Y axes by specifying two values, such as `scale(2, 1.5)` to scale the element horizontally by a factor of 2 and vertically by a factor of 1.5.
To learn one-to-one Web Designing, visit the Academy of Web Technologies and Information Management (AWTIM) or call 08961235337 for details.