如何使用jQuery插件将图像形状动画成梯形

Question

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

我已经疯狂地搜索了一个简单而轻量级的jQuery插件，但是没有太多结果。 我更倾向于使用jquery使其与尽可能多的浏览器兼容，但我也可以接受CSS替代方案？

提前感谢您的帮助。

- user1960089

---

请查看此链接：http://sitepop.wordpress.com/2012/09/30/jquery-path-animation-using-simple-shapes/，其中介绍了使用简单形状实现jQuery路径动画的方法。 - Deepak Biswal

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度
• perspective函数使其以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/

- Louis Ricci

---

我经常遇到这种解决方案，唯一的问题是这更像一个菱形而不是梯形。我正在寻找一种方法来“缩小”图像的一个边缘。 - user1960089

@user1960089 - 只需使用transform-origin并将原点设置为您不想缩小的一侧，查看我的编辑示例。 - Louis Ricci

@LastCoder，我已经按照http://www.w3schools.com/cssref/css3_pr_transform-origin.asp的方法尝试过了，但无法仅移动div的一个角落。如果您能提供一个示例，请务必告诉我。谢谢。 - user1477388

基本上，我认为OP想要问的是如何对一个div进行对角线旋转。例如，如果你向后推平面的左上角，平面的右下角将会更靠近，而左上角将会更远。在CSS/jQuery中是否可能实现这一点？ - user1477388

这就是我所说的（我在下面发布了一个答案）。 - user1477388

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/

- user1477388