Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 652 of 801
Example of key frames with left animation using CSS3
The CSS @keyframes rule allows you to create smooth animations by defining the intermediate steps between the start and end of an animation. This example demonstrates a left-sliding animation where an element moves from right to left across the screen. Syntax @keyframes animation-name { from { /* starting CSS properties */ } to { /* ending CSS properties */ } } selector { ...
Read MoreDefine skew transforms along with x axis using CSS
The CSS skewX() transform function distorts an element by skewing it along the x-axis (horizontally). This creates a slanted effect where the element appears tilted to the left or right while maintaining its height. Syntax transform: skewX(angle); Where angle is specified in degrees (deg) or radians (rad). Positive values skew the element to the left, while negative values skew it to the right. Example: Skewing Element Along X-Axis The following example demonstrates how to apply a skew transform along the x-axis − div ...
Read MoreRotate the element based on an angle using CSS
The CSS transform: rotate() property is used to rotate an element by a specified angle. The rotation is applied around the element's center point by default. Syntax selector { transform: rotate(angle); } Possible Values ValueDescription degDegrees (0deg to 360deg) radRadians (0rad to 6.28rad) turnTurns (0.5turn = 180deg) Example: Basic Element Rotation The following example demonstrates how to rotate an element by 20 degrees − .box { width: 300px; ...
Read MoreChange the height of element using CSS
The CSS height property is used to set the height of an element. You can also use the scaleY() transform function to scale the height proportionally without changing the actual height value in the document flow. Syntax /* Using height property */ selector { height: value; } /* Using scaleY() transform */ selector { transform: scaleY(factor); } Method 1: Using Height Property The most direct way to change element height is using the height property − ...
Read MoreTransform the element along with x-axis and y-axis with CSS
The CSS translate() function is used to move an element from its current position along the x-axis and y-axis. This transformation does not affect the document flow, meaning other elements remain in their original positions. Syntax transform: translate(x, y); Where: x − a length value representing the horizontal displacement y − a length value representing the vertical displacement (optional, defaults to 0) Example: Moving Element Along Both Axes The following example demonstrates how to translate an element 30px to the right and 20px down − ...
Read MoreCSS3 Multi-Column rule-style Property
The CSS column-rule-style property is used to specify the style of the rule (line) that appears between columns in a multi-column layout. This property helps create visual separation between columns. Syntax selector { column-rule-style: value; } Possible Values ValueDescription noneNo rule (default) solidA solid line dashedA dashed line dottedA dotted line doubleA double line grooveA 3D grooved line ridgeA 3D ridged line insetA 3D inset line outsetA 3D outset line Example The following example demonstrates the column-rule-style property with a solid line between columns − ...
Read MoreCSS3 Multi-Column rule-width Property
The CSS column-rule-width property is used to specify the width of the rule (line) that appears between columns in a multi-column layout. This property works in conjunction with column-rule-style and column-rule-color to create visual separators between columns. Syntax selector { column-rule-width: value; } Possible Values ValueDescription thinA thin rule (typically 1px) mediumA medium rule (typically 3px) - default value thickA thick rule (typically 5px) lengthA specific width in px, em, rem, etc. Example: Using column-rule-width Property The following example demonstrates the column-rule-width property with a 5px ...
Read MoreMatrix Transform in another direction with CSS
The CSS matrix() transform function allows you to apply complex 2D transformations including scaling, rotating, skewing, and translating elements in different directions. By adjusting the matrix parameters, you can create various transformation effects. Syntax transform: matrix(a, b, c, d, tx, ty); Where: a and d − scaling on x and y axis b and c − skewing on x and y axis tx and ty − translation on x and y axis Example: Matrix Transform with Skew and Translation The following example demonstrates how to use matrix transform to skew and ...
Read MoreRotate div to -20 degrees angle with CSS
The CSS transform property with rotate() function allows you to rotate an element by a specified angle. To rotate a div to -20 degrees, you apply a negative rotation value which rotates the element clockwise. Syntax selector { transform: rotate(angle); } Example The following example demonstrates how to rotate a div to -20 degrees angle − div { width: 300px; height: 100px; ...
Read More2D transforms in CSS3
CSS 2D transforms allow you to modify the appearance of elements by translating, rotating, scaling, and skewing them in 2D space without affecting document flow. Syntax selector { transform: function(value); } Transform Functions FunctionDescription translate(x, y)Moves element along x and y axes translateX(n)Moves element along x-axis only translateY(n)Moves element along y-axis only scale(x, y)Changes element size (width and height) scaleX(n)Changes element width only scaleY(n)Changes element height only rotate(angle)Rotates element by specified angle skewX(angle)Skews element along x-axis skewY(angle)Skews element along y-axis matrix(a, b, c, d, e, f)Combines all transforms using ...
Read More