---
title: skew()
slug: Web/CSS/transform-function/skew
tags:
  - CSS
  - CSS变形
  - CSS方法
  - 引用
translation_of: Web/CSS/transform-function/skew()
original_slug: Web/CSS/transform-function/skew()
---
<div>{{CSSRef}}</div>

<div><strong><code>skew() </code></strong>函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("&lt;transform-function&gt;")}} 数据类型</div>

<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>

<p class="hidden">这个资源的交互案例在GitHub库中，如果您想贡献一个交互的案例，请克隆<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>并且通过提交pull request给我们。</p>

<p>这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。</p>

<h2 id="语法">语法</h2>

<p> <code>skew()</code> 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。</p>

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

skew(<em>ax</em>, <em>ay</em>)
</pre>

<h3 id="参数值">参数值</h3>

<dl>
 <dt><code>ax</code></dt>
 <dd><code>ax</code> 是一个 {{cssxref("&lt;angle&gt;")}}，表示用于沿横坐标扭曲元素的角度。</dd>
 <dt><code>ay</code></dt>
 <dd><code>ay</code> 是一个 {{cssxref("&lt;angle&gt;")}} ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。</dd>
</dl>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">笛卡儿坐标 ℝ<sup>2</sup></th>
   <th scope="col">齐次坐标 ℝℙ<sup>2</sup></th>
   <th scope="col">笛卡儿坐标 ℝ<sup>3</sup></th>
   <th scope="col">齐次坐标 ℝℙ<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" name="Examples">示例</h2>

<h3 id="Using_a_single_x-angle" name="Using_a_single_x-angle">使用单个参数</h3>

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

<pre class="brush: html"><code>&lt;div&gt;Normal&lt;/div&gt;
&lt;div class="skewed"&gt;Skewed&lt;/div&gt;</code></pre>

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

<pre class="brush: css"><code>div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /* Equal to skewX(10deg) */
  background-color: pink;
}</code></pre>

<h4 id="结果">结果</h4>

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

<h3 id="Using_two_angles" name="Using_two_angles">使用两个参数</h3>

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

<pre class="brush: html"><code>&lt;div&gt;Normal&lt;/div&gt;
&lt;div class="skewed"&gt;Skewed&lt;/div&gt;</code></pre>

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

<pre class="brush: css"><code>div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}</code></pre>

<h4 id="结果_2">结果</h4>

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

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}</td>
   <td>{{Spec2("CSS3 Transforms")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<p>有关兼容性信息，请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> 的数据类型。</p>

<h2 id="另请参阅">另请参阅</h2>

<ul>
 <li>{{cssxref("transform")}}</li>
 <li>{{cssxref("&lt;transform-function&gt;")}}</li>
</ul>