skewX**()
skewY**()
skew**(x,y)
参数填写倾斜角度
skewX()它倾斜的是Y轴，skewY**()它倾斜的是X轴，倾斜后会自动拉伸使其元素高度变

  1. transform: skew(45deg,0);

倾斜后示意图
image.png
倾斜后你会发现元素的高度不变，这说明倾斜具中有拉伸效果，不然高度应该缩小

  1. transform: skew(45deg,0) translateX(100px);

将其x轴平移100px
image.png
你会发现，他倾斜并不是x轴，不然怎吗会向右平移100px,其实他倾斜的是y轴，
将其translateX(100px)改为translateY(100px)的效果图
image.png
skewX**()它倾斜的是Y轴，skewY()它倾斜的是X轴，倾斜后会自动拉伸使其元素高度变**

demo1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         @keyframes s{
  9.             0%{
  10.                 transform: skew(45deg,45deg);
  11.             }
  12.             50%{
  13.                 transform: skew(0deg,0deg);
  14.             }
  15.             100%{
  16.                 transform: skew(-45deg,-45deg);
  17.             }
  18.         }
  19.         body {
  20.             perspective: 800px;
  21.             transform-style: preserve-3d;
  22.         }
  23.         div {
  24.             width: 200px;
  25.             height: 200px;
  26.             background: url(/1.jpg);
  27.             transform-origin: 0 0;
  28.             margin: 200px auto;
  29.             animation: s 4s cubic-bezier(0,0,1,1) infinite alternate;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div></div>
  35. </body>
  36. </html>