首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

skewY()

skewX()CSS函数是一个垂直方向上的剪切映射,即在垂直方向上以一定的角度扭曲的元素的每个点。这是通过将横坐标增加一个与指定角度成比例的值以及到原点的距离来完成的。离原点越远,改点增加的值就越大。其结果是一个<transform-function>数据类型。

语法

代码语言:javascript
复制
skewY(a)

可能值

a代表沿纵坐标扭曲元素的角度<angle>

Cartesian coordinates on ?2

Homogeneous coordinates on ??2

Cartesian coordinates on ?3

Homogeneous coordinates on ??3

10tan(ax)1

100tan(ax)10001

100tan(ax)10001

1000tan(ax)10000100001

| 1 tan(a) 0 1 0 0 |

实例

HTML

代码语言:javascript
复制
<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

代码语言:javascript
复制
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}

结果

另见

  • transform
  • <transform-function>

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com