css3探索之旅：transfrom变换

 

测试

CSS探索之族

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>测试</title>
<meta name="author" content="" />
<meta name="copyright" content="" />
<style>
*{margin:0;padding:0;font-size:12px}
a{
    display:block;
    background:#333;
    position:fixed;
    top:0;
    left:0;
    font:bold 14px georgia,sans-serif;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff;
    -moz-box-shadow:0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff;
    box-shadow:0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff;
    text-shadow:1px 1px 1px rgba(0,0,0,.1);
    color:#fff;
    width:200px;
    height:28px;
    line-height:28px;
    text-decoration:none;
    text-align:center;
    -webkit-transform:translate(-40px,45px) rotate(-45deg);
    -moz-transform:translate(-40px,45px) rotate(-45deg);
    -o-transform:translate(-40px,45px) rotate(-45deg);
    transform:translate(-40px,45px)rotate(-45deg);
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;    
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;

}
a:hover{
    background:#900;
    text-decoration:none;
    text-shadow:1px 1px 1px rgba(0,0,0,.5)
}
</style>
</head>
<body>
<a href="">CSS探索之族</a>
</body>
</html>
posted @ 2012-02-09 12:30  jennyQ  阅读(667)  评论(0)  编辑  收藏  举报