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

Question

我正在尝试制作一个将方形图像转换为“横向梯形”的动画。像这样： http: //i.stack.imgur.com/QRtgz.png（忽略0和1）

我一直在疯狂地寻找一个简单而轻量级的 jQuery 插件，但是没有太多的东西出现。我宁愿坚持使用 jquery 以使其与尽可能多的浏览器兼容，但我对 CSS 替代品持开放态度？

提前致谢

Answer 1

.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);
}

http://jsfiddle.net/43gLv/

• rotateY 在 Y 轴（垂直轴）上旋转元素 N 度
• 透视使其呈现为 3d 透视图，观看者距离 N 像素

---

执行动画（过渡）。

.skewed {
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
}
.skewed:hover {
    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);
}

http://jsfiddle.net/43gLv/2/

编辑要缩小一个边缘，您可以使用 transform-origin

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;

http://jsfiddle.net/43gLv/3/

Answer 2

我认为这就是您所要求的：向后推左上角，使右下角更近。

<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);
}

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

http://jsfiddle.net/ewGWj/17/

夸张的例子：

http://jsfiddle.net/ewGWj/18/