这个{{倾斜Y}} 仿射变换模板围绕给定原点沿Y轴倾斜元素(倾斜点,从元素边界框的左上角开始,默认为其边界框的中心)。
用法
{{slokY|''要倾斜的元素''|角度=“逆时针角度”(默认:0)|角度单位=度、弧度或梯度(默认:弧度)|原点=“x y”(默认值:50%50%)}}
或
- {{倾斜Y|沿Y轴倾斜的元素|角度=逆时针角度(默认:0)|角度单位=度、弧度或梯度(默认:弧度)}}
或
- {{倾斜Y|沿Y轴倾斜的元素|角度=逆时针角度(默认值:0)}}
或
- {{倾斜Y|沿Y轴倾斜的元素|逆时针角度(默认值:0)}}
或(标识操作,因为倾斜是默认角度,即0)
- {{倾斜Y|沿Y轴倾斜的元素}}
有效输入
- 角:角度(正值为逆时针)为实数(默认值:0);
- 角度单位:度,拉德或毕业生(默认值:拉德);
- 起源:x年原点(从元素边界框的左上角)用作倾斜点(默认值:50%50%),单位为%,二甲苯,厘米,毫米,在里面,pt(磅),个人电脑,相对长度单位,前任.
示例
输入有效的示例
注释:在Firefox 22.0中,圆角支持的笔划样式似乎只有固体或没有人虽然对于笔划的直线部分虚线和星罗棋布的也支持样式!(对于{{椭圆}}和{{圆圈}}模板中除了圆形部分外没有其他内容,支持的笔划样式似乎也只是固体或没有人.)
注释:可以看到,笔划绘制在边界框的外部。
代码 |
|
结果 |
{{canvas|width=500|height=500|float=right|<---->{{translate|<---->{{矩形|宽度=350 |高度=250 |笔划宽度=5 |单位=px|笔划=纯金|填充=白色}}<!---->| 250, 250 }}<!---->{{translate|<---->{{swokX|<---->{{矩形|宽度=250|高度=150|笔划宽度=5|单位=px|笔划=纯橙色|填充=透明|content=<span style{{=}}“color:orange;”>我是橙色的,{{nl}}<---->沿着X倾斜15{{sym|deg}},{{nl}}然后平移</span>}}<!---->|角度=15 |角度单位=度}}<!---->| 250, 250 }}<!---->{{translate|<---->{{swikY|<---->{{矩形|宽度=250|高度=150|笔划宽度=5|单位=px|笔划=纯绿色|填充=透明|content=<span style{{=}}“color:green;”>我是绿色的,{{nl}}<---->沿Y倾斜15{{sym|deg}},{{nl}}然后翻译</span>}}<!---->|角度=15 |角度单位=度}}<!---->| 250, 250 }}<!---->{{translate|<---->{{圆形矩形|宽度=120 |高度=60 |笔划宽度=2 |单位=px|笔划=实心rgba(0,0,0,0.5)|填充=rgba(255,255,0,0.25)|border-radius=50%50%0 0/100%100%0|content=我是黄色的,{{nl}}是一个半圆。}}<!---->| 85, 445}}<!---->{{translate|<---->{{swokX|<---->{{圆形矩形|宽度=120 |高度=60 |笔划宽度=2 |单位=px|笔划=实心rgba(0,0,0和0.5)|填充=rgba(255,255,0,0.25)|border-radius=50%50%0 0/100%100%0|content=我是黄色的,{{nl}}<---->沿X倾斜45{{sym|deg}},半圆。}}<!---->|角度=45 |角度单位=度}}<!---->| 445, 445}}<!---->{{translate|<---->{{swikY|<---->{{圆形矩形|宽度=120 |高度=60 |笔划宽度=2 |单位=px|笔划=实心rgba(0,0,0,0.5)|填充=rgba(255,255,0,0.25)|border-radius=50%50%0 0/100%100%0|content=我是黄色的,{{nl}}<---->沿Y轴倾斜45{{sym|deg}},半圆。}}<!---->|角度=45 |角度单位=度}}<!---->| 250, 445}}<!---->{{translate|<---->{{圆形矩形|宽度=100 |高度=100 |笔划宽度=2 |单位=px|笔划=纯紫色|填充=青色|border-radius=0 0 100%0|content=四分之一{{nl}}圆。}}<!---->| 440, 60}}<!---->{{translate|<---->{{swokX|<---->{{圆形矩形|宽度=100 |高度=100 |笔划宽度=2 |单位=px|笔划=纯紫色|填充=青色|border-radius=0 0 100%0|content=A歪斜{{nl}}<---->(沿X的45{{sym|deg}}){{nl}}四分之一{{nl}}圆。}}<!---->|角度=45 |角度单位=度}}<!---->| 60, 60}}<!---->{{translate|<---->{串Y|<---->{{圆形矩形|宽度=100 |高度=100 |笔划宽度=2 |单位=px|笔划=纯紫色|填充=青色|border-radius=0 0 100%0|content=A歪斜{{nl}}<---->(沿Y方向45{{sym|deg}}){{nl}}四分之一{nl}}圆。}}<!---->|角度=45 |角度单位=度}}<!---->| 250, 60}}}}
|
|
|
输入无效的示例
(...)
CSS转换
囊性纤维变性。帮助:CSS转换#CSS转换源.
囊性纤维变性。帮助:CSS转换#CSS扭曲.
另请参见
请参阅帮助:CSS转换.
外部链接