A website's visual attractiveness and interaction can be improved by using the many choices provided by CSS to modify components and add visual effects. Together with visual effects like text shadows, blend modes, and box shadows, let's examine 2D and 3D transformations.
An element's look in two- or three-dimensional space can be changed using CSS transforms. Elements can be skewered, translated, scaled, and rotated in this manner.
Rotate: A rotating element revolves around a stationary point.
Scale: Adjusts an element's size using the scale.
Translate: Transfers an object from one location to another along a predetermined path.
Skew: Tilting an element along the X and/or Y axes causes it to become skew.
Code
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transforms Example</title> <style> .box { width: 100px; height: 100px; background-color: skyblue; margin: 20px; transition: transform 0.5s ease; } .rotate:hover { transform: rotate(45deg); } .scale:hover { transform: scale(1.5); } .translate:hover { transform: translate(50px, 50px); } .skew:hover { transform: skew(20deg, 10deg); } </style> </head> <body> <div class="box rotate">Rotate</div> <div class="box scale">Scale</div> <div class="box translate">Translate</div> <div class="box skew">Skew</div> </body> </html> |
Every div has a class that matches the transformation it illustrates. Each box has a corresponding transform effect that becomes active as you hover over it, showing you how the piece changes in look.
Content, padding, border, and margin make up the box model.
Relative moves from original position; absolute positions relative to nearest positioned ancestor.
id is unique; class can be reused.
Minify files, reduce specificity, and remove unused styles.
Overrides all other declarations, regardless of specificity.
Use margin: auto or flexbox/grid techniques.
Allow responsive design by applying styles based on screen size or device.
Define relationships between selectors: descendant ( ), child (>), adjacent (+), sibling (~).
Tools like SASS or LESS add features like variables and nesting to CSS.
Targets part of an element, like ::before or ::after.
Use @import "filename.css"; at the top of the file.
Controls stacking order of overlapping elements.
Forces a property to inherit value from parent.
Static — not affected by top, bottom, left, or right.
Use universal selector * or define styles in body/root.
em is relative to parent; rem is relative to root element.
Inline, internal (embedded), and external CSS.
A layout model for arranging elements in rows or columns with flexible sizing.
Targets elements in a specific state, like :hover or :nth-child().
Use fluid layouts, media queries, and relative units.
CSS styles HTML elements to control layout, color, fonts, and responsiveness.
Reusable custom property values, declared with --var-name.
Determines which rule applies when multiple rules target the same element.
Performs calculations to dynamically set CSS property values.
Copyrights © 2024 letsupdateskills All rights reserved