这个{{变压器歪斜}} 跨浏览器兼容性模板提供了CSS公司style属性内倾斜元素的代码。在内部使用style=“”HTML元素的属性，如其他CSS属性。
用法
-
<span style=“{{变压器歪斜|沿X的角度（度）|沿Y轴的角度（度）}}“>要倾斜的元素</span>
或
-
<span style=“{{变压器歪斜|沿X的角度（度）|沿Y轴的角度（度）|显示器=显示}}">要倾斜的元素</span>
带有参数
-
沿X的角度（度）：第一个未命名参数{{{1|0}}}用于沿X的倾斜角度（以度为单位，默认为0）。
- 正值沿X向逆时针方向倾斜，负值沿X向顺时针方向倾斜。
-
沿Y轴的角度（度）：第二个未命名参数{{{2|0}}}用于沿Y轴倾斜角度（以度为单位，默认为0）。
- 正值沿Y顺时针倾斜，负值沿Y逆时针倾斜。
-
显示：命名参数显示允许您更改CSS显示属性。默认为内联块；.
使用此模板创建倾斜效果时，编辑应仔细考虑可达性.
注意:IE8或更低版本不支持此模板。IE8需要繁琐的矩阵计算。
示例
倾斜发生在对象边界框的中心，它的有效尺寸将保持对象的原始值，就像没有倾斜一样，因此可以调整位置和填充以避免不必要的重叠。使用显示参数以进一步控制定位。
| 语法 |
|
结果 |
|
|
A A B C E</span>
|
|
A类 B类 C类 D类 E类
|
<span style=“{{transform-skew|-40|0}}”>A</span>B</span>C</span]D</span>
|
|
A类 B类 C类 D类 E类
|
A</span>B</span>C</span]D</span>
|
|
A类 B类 C类 D类 E类
|
- 一些歪斜的特殊字符（当font-family没有斜体或斜体字体时很有用）:
|
б</span>
|
|
∫ ∫ ∫ ∫ ∫
|
|
|
这个向右倾斜的文本{{nl}}在底部垂直对齐</span>{nl|3}}这个向左倾斜的文本{{nl}}在底部垂直对齐</span>
|
|
这个向右倾斜的文本
是垂直的
底部对齐。
这个向左倾斜的文本
是垂直的
底部对齐。
|
|
|
<div style=“position:relative；top:0px；left:0px；{{transform-skew|-30|display=block}}”>[[文件：Clockface.png|200px]]</div>
|
|
|
|
|
<div style=“position:relative；top:0px；left:0px；{transform-skew|30|display=block}}”>[[文件：Clockface.png|200px]]</div>
|
|
|
- 这是一个占位符图像。它沿X顺时针倾斜30度，沿Y逆时针倾斜30°。
|
<div style=“位置：相对；顶部：0px；左侧：0px；｛｛transform-s偏斜|-30|-30|display=block｝｝”>[[File:Clockface.png|200px]]</div>
|
|
|
- 这是一个占位符图像。它沿X顺时针方向倾斜30度，沿Y顺时针方向偏移30度。
|
<div style=“position:relative；top:0px；left:0px；{{transform-skew|-30|30|display=block}}”>[[文件：Clockface.png|200px]]</div>
|
|
|
|
|
<div style=“border:3px solid red；width:150px；position:relative；top:50px；opacity:0.5；{{transform-skew|-30|15|display=block}}”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempo incididunt ut labour et dolore magna aliqua</div（分频）>
|
|
Lorem ipsum dolor sit amet，consectetur adipsicing elit，sed do eiusmod tempora incididunt ut labour et dolore magna aliqua（劳伦·伊普桑·多洛尔·阿米特（洛雷姆·伊普桑·哀悼），圣职告别精英，sed。
|
另请参见
外部链接
