css3 skew坐标轴

transform是css3中对于性能来说是比较安全的

在二维空间里面,skew有两个属性值:skewX,skewY,图形的变化也就是针对这两个值来操作;

transform: skewX(45deg);

可以看到demo标签向左倾斜45度产生的形变,那么为什么会产生这个形变呢?

因为demo的高度是不变的,只要倾斜角度不是180的倍数,demo的高度始终保持原有的高度,所以只能拉长本身,产生形变;(围绕X轴倾斜,保持高度不变,围绕Y轴,保持宽度不变)

为什么说不是180的倍数呢?原因很简单,如果是180的倍数,demo元素将不可见。

transform: skew(45deg,45deg);

注意:两张图片的围绕中心点不同,这个默认值是图一

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值