- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Function - skew()
The CSS function skew() specifies a transformation that slants an element on the 2D plane, resulting in a data type of <transform-function>.
Possible Values
ax - Represents an <angle> that specifies the angle used to skew the element along the x-axis.
ay - Represents an <angle> that specifies the angle used to distort the element along the y-axis. If it is not specified, it defaults to 0 and causes a purely horizontal skew.
This transformation, known as shear mapping or transvection, skews points within an element both horizontally and vertically.
It simulates dragging each corner of the element by a specified angle. The coordinates of the points are adjusted based on the specified angle and distance from the origin, with the more distant points being affected more.
Syntax
The skew() function may have one or two values to determine the extent of skew in the horizontal and vertical directions. If only one value is specified, it applies to the x-axis, while the y-axis is unaffected.
skew(ax) skew(ax, ay)
CSS skew() - X-axis Only
The following example demonstrates the usage of skew() to skew on one axis only:
<html> <head> <style> .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 50px; } .skew-demo { transform: skew(20deg); background-color: #FFC107; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; color: #fff; } .normal-demo { background-color: #2196F3; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; color: #fff; } </style> </head> <body> <div class="container"> <div class="skew-demo">This is div element showing Skew</div> <div class="normal-demo">This is a div element showing Normal</div> </div> </body> </html>
CSS skew() - Both Axes
The following example demonstrates the usage of skew() to skew on both the axis
<html> <head> <style> .container { width: 200px; height: 200px; margin-top: 40px; margin-left: 40px; background-color: #DAF7A6; transform: skew(20deg, 10deg); } </style> </head> <body> <div class="container"> <p>This is an example of skewing on both axes.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google