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

Question

我正在尝试制作一个动画，将方形图像转换为“横向梯形”。像这样: /image/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/