如何将图像形状动画化为梯形，希望使用jquery插件

我正在尝试制作一个动画，将一个正方形图像转换成一个“横向梯形”。这样地： （忽略0和1）

我一直在疯狂地搜索一个简单而轻巧的jQuery插件，但是没有什么新的东西。我更愿意坚持使用jquery，使其与尽可能多的浏览器兼容，但我对CSS的替代方案持开放态度

提前谢谢

.skewed {
    transform: perspective(500px) rotateY(45deg);
    -webkit-transform: perspective(500px) rotateY(45deg);
    -moz-transform: perspective(500px) rotateY(45deg);
    -ms-transform: perspective(500px) rotateY(45deg);
    -o-transform: perspective(500px) rotateY(45deg);
}

• 旋转Y轴（垂直轴）上的元素旋转N度
• 透视使其呈现为三维透视图，且距离观察者N个像素

---

执行动画（过渡）

编辑仅收缩使用“变换原点”的一条边

transform-origin: left center 0;
-webkit-transform-origin: left center 0;
-moz-transform-origin: left center 0;
-ms-transform-origin: left center 0;
-o-transform-origin: left center 0;

---

我想这就是你的要求：向后推左上角，使右下角更近

<div class="perspective"><div class="square">the square</div></div>

.perspective{
    -webkit-perspective : 800px
}
.square{
    margin: 20px;
    -webkit-transform-origin: center center;
    -webkit-transition: all 1s ease;
    width:100px;
    height:100px;
    background:#AAA;
}
.square:hover{
    -webkit-transform: rotateX(-5deg) rotateZ(5deg) rotateY(-5deg);
}

广场
.透视图{
-webkit透视图：800px
}
.广场{
利润率：20px；
-webkit变换原点：中心；
-webkit过渡：所有1s轻松；
宽度：100px；
高度：100px；
背景：#AAA；
}
.square:悬停{
-webkit变换：rotateX（-5度）rotateZ（5度）rotateY（-5度）；
}

示例（将鼠标悬停在div上）：

夸张的例子：

---

。我一直在寻找这种解决方案，唯一的问题是，这更像是菱形而不是梯形。我正在寻找一种方法来“缩小”这个区域的一个边缘image@user1960089这就是为什么我没有将此作为答案发布。我仍然找不到能收缩一侧的东西，尽管。。。仍在查看。@user1960089-只需使用“变换原点”并将原点设置为不希望收缩的一侧，请查看“我的编辑”以获取示例。@user1477388-变换原点就是您的外观for@LastCoder我曾尝试按照，但无法仅移动div的一个角。如果您能提供一个示例，请执行。谢谢

<div class="perspective"><div class="square">the square</div></div>

.perspective{
    -webkit-perspective : 800px
}
.square{
    margin: 20px;
    -webkit-transform-origin: center center;
    -webkit-transition: all 1s ease;
    width:100px;
    height:100px;
    background:#AAA;
}
.square:hover{
    -webkit-transform: rotateX(-5deg) rotateZ(5deg) rotateY(-5deg);
}