<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://keleyi.com">
<title>实用CSS3的transform实现多种动画效果-柯乐义</title><base target="_blank" />
<style type="text/css">
.menu ul {
border-top: 2px solid #f5f5f5; padding: 0 10px;
margin: 0;
}
.menu ul li {
padding: 0; margin: 0; list-style: none;
}
.menu ul li a{
color: #fff; float: left; margin: 0 5px; font-size: 14px; width: 65px;
height: 50px; line-height: 50px; text-align: center; padding: 10px 5px; background: #151515;
border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -webkit-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;
}
/* x-轴偏移*/
.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);
}
/* y-轴偏移*/
.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);
}
/* x/y 轴都偏移*/
.menu ul li 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.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);
}
/** transform:skewX(x) */
.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);
}
/** transform:skewY(y) */
.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);
}
</style>
</head>
<body>
<div class="menu">
<ul class="clearfix">
<li class="item translate"><a href="http://keleyi.com/a/bjad/b6x9q8gs.htm">Translate</a></li>
<li class="item translate-x"><a href="http://keleyi.com/a/bjac/2fs4sdog.htm">TranslateX</a></li>
<li class="item translate-y"><a href="http://keleyi.com/a/bjac/3iote6u9.htm">TranslateY</a></li>
<li class="item rotate"><a href="http://keleyi.com/a/bjad/8pwhsjna.htm">Rotate</a></li>
<li class="item scale"><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm">Scale</a></li>
<li class="item scale-x"><a href="http://keleyi.com/a/bjad/7svi1lby.htm">ScaleX</a></li>
<li class="item scale-y"><a href="http://keleyi.com/a/bjac/fsjrtc0j.htm">ScaleY</a></li>
<li class="item skew"><a href="http://keleyi.com/a/bjad/mroxdkos.htm">Skew</a></li>
<li class="item skew-x"><a href="http://keleyi.com/a/bjac/kwxcvl59.htm">SkewX</a></li>
<li class="item skew-y"><a href="http://keleyi.com/a/bjac/3pipmkmg.htm">SkewY</a></li>
<li class="item matrix"><a href="http://keleyi.com/a/bjac/eu7eaagg.htm">Matrix</a></li>
</ul>
</div>
</body>
</html>
时间： 2024-10-26 02:05:27