<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS3变形移位扭曲</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/modernizr.custom.95406.js"></script>
<style>
.menu ul{
border-top: 15px solid black;
padding:0 10px;
}
.menu ul li a{
color: #fff;float: left;margin: 0 5px; font-size: 14px;height: 50px;line-height: 50px;text-align: center;width: 65px; padding: 10px 5px; background: #151515;-moz-border-radius:0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;border-radius:0 0 5px 5px;-moz-box-shadow:0 0 1px #ccc,inset 0 0 2px #fff;-webkit-box-shadow:0 0 1px #ccc,inset 0 0 2px #fff;box-shadow:0 0 1px #ccc,inset 0 0 2px #fff; text-shadow: 0 1px 1px #686868; text-decoration: none;
}
.menu ul li.translate a{
background: #2EC7D2;
}
.menu ul li.translate-x a{
background: #8FDD21;
}
.menu ul li.translate-y a{
background: #F45917;
}
.menu ul li.rotate a{
background: #D50E19;
}
.menu ul li.scale a{
background: #cdddf2;
}
.menu ul li.scale-x a{
background: #0fDD21;
}
.menu ul li.scale-y a{
background: #cd5917;
}
.menu ul li.skew a{
background: #519;
}
.menu ul li.skew-x a{
background: #D50;
}
.menu ul li.skew-y a{
background: #E19;
}
.menu ul li.matrix a{
background: #919;
}
.menu ul li.translate a:hover{
-moz-transform: translate(-10px,-10px);
-webkit-transform: translate(-10px,-10px);
-o-transform: translate(-10px,-10px);
-ms-transform: translate(-10px,-10px);
transform: translate(-10px,-10px);
}
.menu ul li.translate-x a:hover{
-moz-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
-o-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
.menu ul li.translate-y a:hover{
-moz-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
.menu ul li.rotate a:hover{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu ul li.scale a:hover{
-moz-transform: scale(0.8,0.8);
-webkit-transform: scale(0.8,0.8);
-o-transform:scale(0.8,0.8);
-ms-transform: scale(0.8,0.8);
transform: scale(0.8,0.8);
}
.menu ul li.scale-x a:hover{
-moz-transform: scaleX(0.8);
-webkit-transform:scaleX(0.8);
-o-transform:scaleX(0.8);
-ms-transform:scaleX(0.8);
transform:scaleX(0.8);
}
.menu ul li.scale-y a:hover{
-moz-transform: scaleY(1.2);
-webkit-transform:scaleY(1.2);
-o-transform:scaleY(1.2);
-ms-transform:scaleY(1.2);
transform:scaleY(1.2);
}
.menu ul li.skew a:hover{
-moz-transform: skew(45deg,15deg);
-webkit-transform: skew(45deg,15deg);
-o-transform: skew(45deg,15deg);
-ms-transform: skew(45deg,15deg);
transform: skew(45deg,15deg);
}
.menu ul li.skew-x a:hover{
-moz-transform: skewX(-30deg);
-webkit-transform:skewX(-30deg);
-o-transform:skewX(-30deg);
-ms-transform:skewX(-30deg);
transform: skewX(-30deg);
}
.menu ul li.skew-y a:hover{
-moz-transform:skewY(30deg);
-webkit-transform: skewY(30deg);
-o-transform: skewY(30deg);
-ms-transform: skewY(30deg);
transform: skewY(30deg);
}
.menu ul li.matrix a:hover{
-moz-transform: matrix(1,1,-1,0,0,0);
-webkit-transform: matrix(1,1,-1,0,0,0);
-o-transform: matrix(1,1,-1,0,0,0);
-ms-transform: matrix(1,1,-1,0,0,0);
transform: matrix(1,1,-1,0,0,0);
}
.menu ul li.transform-origin a {
-moz-transform-origin: left top;
-webkit-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}
.demo a{
width: 100px;
padding: 5px;
background: red;
display: block;
margin-top: 100px;
}
.demo a:hover {
-moz-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
-webkit-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
-o-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
-ms-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
}
</style>
</head>
<body>
<div class="menu">
<ul class="clearfix">
<li class="item translate transform-origin"><a href="#">Translate</a></li>
<li class="item translate-x transform-origin"><a href="#">TranslateX</a></li>
<li class="item translate-y transform-origin"><a href="#">TranslateY</a></li>
<li class="item rotate transform-origin"><a href="#">Rotate</a></li>
<li class="item scale transform-origin"><a href="#">Scale</a></li>
<li class="item scale-x transform-origin"><a href="#">scaleX</a></li>
<li class="item scale-y transform-origin"><a href="#">scaleY</a></li>
<li class="item skew transform-origin"><a href="#">Skew</a></li>
<li class="item skew-x transform-origin"><a href="#">SkewX</a></li>
<li class="item skew-y transform-origin"><a href="#">SkewY</a></li>
<li class="item matrix transform-origin"><a href="#">Matrix</a></li>
</ul>
</div>
<div class="demo">
<a href="#">33333</a>
</div>
</body>
</html>