如果直接rotate, 内容也会跟着变形，所以用伪元素

    1. div {
    2.   width: 100px;
    3.   height: 50px;
    4.   margin-left: 100px;
    5.   line-height: 50px;
    6.   text-align: center;
    7.   position: relative;
    8. }
    10. div::before{
    11.   content:'';
    12.   position: absolute;
    13.   left:0;top:0;right:0;bottom:0;
    14.   background: tomato;
    15.   z-index: -1;
    16.   border-radius: 5px 5px 0 0;
    17.   background-image: linear-gradient(
    18.                     hsla(0,0%,100%,.6),
    19.                     hsla(0,0%,100%,0));
    20.   border: 1px solid rgba(0,0,0,.4);
    21.   border-bottom: none;
    23.   transform: scale(1.1, 1.4) perspective(10px) rotateX(5deg);
    24.   transform-origin: bottom; 
    25. }

    image.png

    1. scale(x, y)分别放大x和y方向，对应的有scaleX()和scaleY()

    2. perspective()设置透视点到屏幕的距离，值越小，变化越明显，小于0看不到变化

      也可以给父元素设置 perspective: 10px 属性, 作用于全部子元素

    3. rotateX沿X轴转动

    4. transform-origin设置原点位置

    将transform-origin改成left或right,效果如下
    image.pngimage.png