图形解析理解 css3 之倾斜属性skew()

最新推荐文章于 2025-05-06 10:44:10 发布

XUE_雪

最新推荐文章于 2025-05-06 10:44:10 发布

阅读量1.5w

点赞数 11

分类专栏： css 文章标签： css3

本文链接：https://blog.youkuaiyun.com/lmx15063393957/article/details/80267731

版权

css 专栏收录该内容

6 篇文章

订阅专栏

1、作用
   改变元素在页面中的形状
2、语法
   属性：transform
   函数：
 1、skew(xdeg) 向横向倾斜指定度数  x取值为正，X轴不动，y轴逆时针倾斜一定角度  x取值为负，X轴不动，y轴顺时针倾斜一定角度  skew(30deg) 2、skew(xdeg,ydeg) ydeg : 纵向倾斜度数  y取值为正，y轴不动,x轴顺时针倾斜一定角度  y取值为负，y轴不动,x轴逆时针倾斜一定角度  3、skewX(xdeg) 4、skewY(ydeg) 3.应用和理解 <!doctype html> <html lang="zh-cn">  <head>  <title>Insert a title</title>  <meta charset="utf-8">  <style>  #d1,#d2{ width:200px; height:200px; position:absolute; left:400px; top:200px; } #d1{ background-color:#ddd; border:1px solid #333; } #d2{ background-color:pink; border:1px solid orange; opacity:0.5;  transform:skew(45deg);  } </style>  </head>  <body>  <div id="d1">参考元素</div>  <div id="d2">转换元素</div>  </body> </html> 效果图：