skew()
, skewX()
et skewY()
- CSS functions
Summary of characteristics of the skew()
function
Description of the skew()
, skewX()
and skewY()
functions.
The skew()
function defines the skew to be applied to the element along the X-axis and/or Y-axis.
It can therefore replace the other two functions that define the tilt on only one of the X or Y axes.
The skewZ()
function is not defined.
The angular values used for the inclination of an element should be understood as follows:
skew()
no longer be used, and that both functions should be used instead
skewX()
and skewY()
.
See CSS Transforms Module Level 1. However, the result obtained with the same angle values is different, as can be seen in the example below.
transform:skew(30deg,30deg);
transform:skewX(30deg) skewY(30deg);
These fonctions can be used with:
transform
: Applies one or more geometric transformations (rotations, enlargements, etc.).
Syntax.
- transform: skewX(10deg); x transform: skewY(20deg); y transform: skew(10deg, 20deg); x y
x
andy
define the angle of the skew to be applied to the element.These are two numerical values followed by their angular unit (see CSS angle units). Values can be positive or negative excluding 90deg and 270deg, as well as their multiples.
If only one value is specified for the
skew()
function, it corresponds to the X-axis tilt, the inclination along the Y-axis being set to 0.
Simulator.
Browsers compatibility with skew()
function.
2D transformations are no longer a problem with current browsers. The same is true for the CSS functions that define these transformations.
skew()
function which, when used with the transform
property, causes the element to skewthe skewX()
and skewY()
functions which, when used with the transform
property, tilt the element horizontally or vertically.Notes:
(1) Does not support 2D transformations on SVG elements. Use the transform
attribute instead.
transformations
skew()
function
skewX()
skewY()
functions
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini
Historic of the skew()
function.
-
CSS Transforms Module Level 1
First level of specification concerning 2D transformations.
Presentation of the different transformation functions includingskew()
,skewX()
andskewY()
.
skew()
is declared deprecated but retained for compatibility reasons.February 28, 2012Working Draft.February 14, 2019Candidate Recommendation. -
CSS Transforms Module Level 2
Level 2 of the Transforms specification, introducing 3D transformations.
No change directly affecting the 2D functionsskew()
,skewX()
andskewY()
.March 03, 2020Working Draft.
See also, concerning transformations.
The CSS Transforms Module contains all the properties and functions related to CSS transformations.
The skew()
, skewX()
, and skewY()
functions are described in this module, as well as all of the following:
Properties:





Functions:

