js

作者: nickfox | 来源:发表于2017-03-27 16:14 被阅读8次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background: #ff4747;
            transition: all 0.5s;
        }
    </style>
</head>
<body>
<div id="div1"></div>
function transform(property){
//transform动画兼容
    return{
        'transform':property,
        '-webkit-transform':property,//Safari and Chrome'-ms-     
        'transform':property,/* IE 9 */
        '-o-transform':property,/* Opera */
        '-moz-transform':property
    }
}
$("#div1").mouseenter(function(){
    $(this).css(transform("rotate(180deg)"))
}).mouseout(function(){
    $(this).css(transform("rotate(0deg)"))
})
</script>
</body>
</html>