Revision 1131043 of skew()

Revision slug: Web/CSS/transform-function/skew
Revision title: skew()
Revision id: 1131043
Created: Oct 17, 2016, 3:43:41 PM
Creator: Sebastianz
Is current revision? Yes
Comment Added 'CSS Function' tag

Tags:

Revision Content

The skew() CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

Syntax

skew(ax)       or
skew(ax, ay)

Values

ax: Is an {{ cssxref("<angle>") }} representing the angle to use to distort the element along the abscissa.
ay: Is an {{ cssxref("<angle>") }} representing the angle to use to distort the element along the ordinate.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} 1 & tan(ax) \\ tan(ay) & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 \\ tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 \\ tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 & 0 \\ tan(ay) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & tan(ax) \\ tan(ay) & 1 \end{matrix})$	`[1 tan(ay) tan(ax) 1 0 0]`

Examples

Using a single x-angle

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
 /* the same as skewX(10deg); */
  transform: skew(10deg);
  background-color: blue;
}

Result

Using two angles

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: skew(10deg, 10deg);
  background-color: blue;
}

Result

Revision Source

<div>{{CSSRef}}</div>

<p>The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
skew(<em>ax</em>)       <em>or</em>
skew(<em>ax</em>, <em>ay</em>)
</pre>

<h2 id="Values">Values</h2>

<dl>
 <dt><em>ax</em></dt>
 <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the abscissa.</dd>
 <dt><em>ay</em></dt>
 <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the ordinate.</dd>
</dl>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
  </tr>
  <tr>
   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Examples">Examples</h2>

<h3 id="Using_a_single_x-angle">Using a single x-angle</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">
&lt;p&gt;foo&lt;/p&gt;
&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">
p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
 /* the same as skewX(10deg); */
  transform: skew(10deg);
  background-color: blue;
}
</pre>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample("Using_a_single_x-angle","100%","200")}}</p>

<h3 id="Using_two_angles">Using two angles</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">
&lt;p&gt;foo&lt;/p&gt;
&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">
p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: skew(10deg, 10deg);
  background-color: blue;
}
</pre>

<h4 id="Result_2">Result</h4>

<p>{{EmbedLiveSample("Using_two_angles","100%","200")}}</p>

Revert to this revision