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 641 of 801
CSS perspective-origin property
The CSS perspective-origin property defines the position from which the viewer is looking at 3D-positioned elements. It determines the vanishing point for the perspective effect, controlling how 3D transformations appear to the viewer. Syntax selector { perspective-origin: x-position y-position; } Possible Values ValueDescription x-positionHorizontal position: left, center, right, or percentage/length values y-positionVertical position: top, center, bottom, or percentage/length values initialSets to default value (50% 50%) inheritInherits from parent element Example: Left Origin Perspective The following example demonstrates how perspective-origin: left affects the viewing angle of a ...
Read MoreUsage of CSS perspective property
The CSS perspective property defines the distance between the user and the z-axis of an element, creating a 3D perspective effect. It controls how 3D transformed elements appear by setting the viewing distance for the transformation. Syntax selector { perspective: value; } Possible Values ValueDescription lengthDistance in px, em, rem, etc. Lower values create more dramatic perspective noneNo perspective applied (default) Example: Comparing Different Perspective Values The following example demonstrates how different perspective values affect 3D rotated elements − ...
Read MoreSpecify how nested elements are rendered in 3D space
The CSS transform-style property controls how nested child elements are rendered in 3D space. It determines whether child elements are positioned in the flat plane of their parent element or in 3D space. Syntax selector { transform-style: flat | preserve-3d; } Possible Values ValueDescription flatChild elements are flattened into the parent's plane (default) preserve-3dChild elements maintain their 3D positioning relative to the parent Example: Nested 3D Elements The following example shows how preserve-3d allows nested child elements to maintain their 3D transformations − ...
Read MoreChange the position on transformed elements with CSS
The CSS transform-origin property is used to change the position (origin point) from which transformations are applied to elements. By default, transformations like rotation, scaling, and skewing occur from the center of the element, but transform-origin allows you to specify a different reference point. Syntax selector { transform-origin: x-axis y-axis z-axis; } Possible Values ValueDescription x-axisDefines the position on the x-axis (left, center, right, %, px) y-axisDefines the position on the y-axis (top, center, bottom, %, px) z-axisDefines the position on the z-axis for 3D transformations (px) ...
Read MoreCSS content-box Value
The CSS background-origin property with the content-box value positions the background image to start from the upper left corner of the content area, excluding padding and borders. This gives you precise control over where your background image begins. Syntax selector { background-origin: content-box; } Possible Values ValueDescription padding-boxBackground starts from the padding edge (default) border-boxBackground starts from the border edge content-boxBackground starts from the content edge Example: Comparing Background Origin Values The following example demonstrates the difference between padding-box, border-box, and content-box values − ...
Read MoreUsage of transform-origin property with CSS
The CSS transform-origin property sets the point around which an element's transformation takes place. By default, transformations occur around the center of an element, but you can change this origin point to any position. Syntax selector { transform-origin: x-axis y-axis z-axis; } Possible Values ValueDescription x-axisHorizontal position: left, center, right, or percentage/length y-axisVertical position: top, center, bottom, or percentage/length z-axisZ-axis position for 3D transformations (length value) Example: Transform Origin with Rotation The following example demonstrates how transform-origin affects the rotation point of an element − ...
Read MoreDisplay the overflowed content when hovering over the element with CSS
The CSS overflow property controls what happens when content exceeds its container's boundaries. By combining overflow with the :hover pseudo-class, you can reveal hidden content when users hover over an element. Syntax selector { overflow: hidden; /* Hide overflowed content initially */ } selector:hover { overflow: visible; /* Show overflowed content on hover */ } Example: Displaying Hidden Text on Hover The following example demonstrates how to show overflowed text when hovering over a container − ...
Read MoreWhich CSS property is used to run Animation in Reverse Direction?
The CSS animation-direction property is used to run animation in reverse direction. This property controls whether an animation should play forwards, backwards, or alternate back and forth. Syntax selector { animation-direction: value; } Possible Values ValueDescription normalAnimation plays forward (default) reverseAnimation plays in reverse direction alternateAnimation plays forward, then backward alternate-reverseAnimation plays backward, then forward Example: Reverse Animation Direction The following example shows how to run an animation in reverse direction using the reverse value − ...
Read MoreCSS padding-box Value
The CSS background-origin property with the padding-box value positions the background image starting from the upper left corner of the padding area. This means the background extends through the padding but not into the border area. Syntax selector { background-origin: padding-box; } Possible Values ValueDescription padding-boxBackground starts from the padding edge (default value) border-boxBackground starts from the border edge content-boxBackground starts from the content edge Example: Comparing Background Origin Values The following example demonstrates the difference between padding-box, border-box, and content-box values − ...
Read MoreAdd a blur effect to the shadow with CSS
The CSS box-shadow property allows you to add shadow effects around an element. When you specify a blur radius value, it creates a soft, blurred shadow instead of a sharp one. Syntax selector { box-shadow: offset-x offset-y blur-radius color; } Parameters ParameterDescription offset-xHorizontal shadow offset (required) offset-yVertical shadow offset (required) blur-radiusAmount of blur applied to shadow (optional) colorShadow color (optional) Example The following example demonstrates how to add a blur effect to a shadow − h2 ...
Read More