jQuery.transform.js 简单好用的CSS3变形插件

该插件简化了CSS3变换（transform）方法的使用，并处理了跨浏览器兼容问题。 Source: http://louisremi.github.io/jquery.transform.js/index.html

jquery，transform

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 5661
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    $('#basic').delegate('.square', 'mouseenter', function() {
        if (!$(this).queue("fx").length) {
            $(this).animate({
                transform: $(this).data('trans')
            }).rewind();
        }
    });

$.fn.rewind = function() {
        return this.each(function() {
            $(this).delay(
                2000
            ).queue(function() {
                $(this).css('opacity', .5).dequeue();
            }).animate({
                transform: ''
            }).queue(function() {
                $(this).css('opacity', 1).dequeue();
            });
        })
    };
});

编译

CSS

section,
footer {
    clear: both;
}
h2 {
    font-family: 'Josefin Slab', arial, serif;
    font-size: 2em;
    padding: 2em 0 0.3em;
}
footer a {
    color: #fff;
    text-decoration: underline;
}
footer {
    font-size: 0.8em;
    text-align: right;
    margin: 4em 0 2em;
}
#basic li {
    display: inline-block;
    width: 250px;
}
.square {
    width: 100px;
    height: 100px;
    margin: 0 75px;
}
.cover {
    margin: 20px 0;
    position: absolute;
}
.fright {
    float: right;
}
.fleft {
    float: left;
}
.color1 {
    background: #bf0000;
    color: #bf0000;
}
.color2 {
    background: #bf5600;
    color: #bf5600;
}
.color3 {
    background: #bfac00;
    color: #bfac00;
}
.color4 {
    background: #7cbf00;
    color: #7cbf00;
}
.color5 {
    background: #26bf00;
    color: #26bf00;
}
.color6 {
    background: #00bf2f;
    color: #00bf2f;
}
.color7 {
    background: #00bf85;
    color: #00bf85;
}
.color8 {
    background: #00a2bf;
    color: #00a2bf;
}
.color9 {
    background: #004cbf;
    color: #004cbf;
}
.color10 {
    background: #0900bf;
    color: #0900bf;
}
.color11 {
    background: #5f00bf;
    color: #5f00bf;
}
.color12 {
    background: #b500bf;
    color: #b500bf;
}

HTML

<section id="basic">
    <ul>
        <li><pre class="prettyprint lang-js">$(elem).animate({
  transform: 'translateX(50px)'
});</pre>
            <li><pre class="prettyprint lang-js">$(elem).animate({
  transform: 'rotate(135deg)'
});</pre>
                <li><pre class="prettyprint lang-js">$(elem).animate({
  transform: 'scale(2,.5)'
});</pre>
                    <li><pre class="prettyprint lang-js">$(elem).animate({
  transform: 'skewX(35deg) skewY(15deg)'
});</pre>
    </ul>
    <div style="position: relative;" class="square fleft">
        <div id="basic1" class="square color1" style="position: absolute; margin-left: 0;" data-trans="translateX(50px)"></div>
    </div>
    <div id="basic2" class="square color2 fleft" data-trans="rotate(135deg)"></div>
    <div id="basic3" class="square color3 fleft" data-trans="scale(2,.5)"></div>
    <div id="basic4" class="square color4 fleft" data-trans="skewX(35deg) skewY(15deg)"></div>
</section>

该插件简化了CSS3变换（transform）方法的使用，并处理了跨浏览器兼容问题。 Source: http://louisremi.github.io/jquery.transform.js/index.html